I am developing a application in django in which i want to set a google map which should show the marker depends on address in database.
I want to know how to do this in javascript and django.
Thanks
You have to read more about Google Maps API: https://developers.google.com/maps/documentation/javascript/
Here is how you can convert address to coords: https://developers.google.com/maps/documentation/geocoding/
Here is how to put simple marker: https://developers.google.com/maps/documentation/javascript/examples/marker-simple
In Django, all you have to do is just get this address as a string from DB (in view) and pass it to template.
In javascript you are making variable:
var address = "{{ address_from_view }}"; and everything else you do using only plain javascript & Google API.
Related
I am in the process of creating an app using the Google Maps api to generate random biking routes (http://sutsurikeru.com/maps) and it works fine so far, but the issue I am having is passing the generated route, including the following info to the google maps app:
Start Destination
Way-point (randomly generated using https://gis.stackexchange.com/questions/25877/how-to-generate-random-locations-nearby-my-location)
End Destination (same as the start destination)
Once I've got all the lat/long information I pass it to a button that is created when the route is generated so that it can pass the route to the Google Maps App, but I am unsure how to pass the way-point as there is no mention of it in the docs - https://developers.google.com/maps/documentation/ios-sdk/urlscheme
$('#goRide').append('<a class="goridebtn" href="comgooglemaps://?saddr=' + address + '&daddr=' + address + '&directionsmode=bicycling">Go ride</a>');
I guess my question is then, can I include the way-point information when I am passing it to the Google Maps App?
i couldn't find the answer for that too , so i ended using:
"comgooglemapsurl" instead..
this way you can pass a full url (same onese used in the browser)
the format will be something like this:
comgooglemapsurl://www.google.com/maps/dir/STARTING_POINT/WAYPOINT_1/WAYPOINT_2/WAYPOINT_3/WAYPOINT_4/DESTINATION
you can add as many points as u wish
comgooglemapsurl://www.google.com/maps/dir/24.848607,46.660478/24.748607,46.760478/24.778607,46.784478
https://developers.google.com/maps/documentation/urls/ios-urlscheme
Looks like you can add waypoints using the +to: variable inside the daddr text. The following example shows this in use:
comgooglemapsurl://?saddr=55.852866,-4.323120&daddr=56.019015,-3.372803+to:55.972934,-3.279419+to:55.932952,-3.284912+to:56.022085,-3.565063
I need to populate some data based on the zipcode of the user visiting the site.
Could somebody tell me how to retrieve the zipcode of the location of that user?
I am using AngularJS on my app.
OK. It is a bit involved, but here is how I would do it, if I were you.
First, you would use the geolocation API as follows:
window.navigator.geolocation.getCurrentPosition(function(pos){
console.log(pos);
});
Inside your callback, you will get a position object. It looks like this:
{
"timestamp":1408324851386,
"coords"{
"speed":null,
"heading":null,
"altitudeAccuracy":null,
"accuracy":30,
"altitude":null,
"longitude":-111.8942634,
"latitude":40.7288257
}
}
Then, you can take the latitude and longitude and call your server to translate it into a ZIP code. Getting the lat/long is the hard part. Doing the math to turn that into a zip is easy.
An alternative to calling your own server to translate the lat/long into a zip, you could call Google Maps' reverse lookup API. You give it a lat long, and it gives you an address, complete with a ZIP. See HERE for how to do that.
DISCLAIMER: This won't work in IE8, as the geolocation API wasn't introduced until IE9. It will work in all other browsers (besides Opera Mini, #NBD).
HERE IS A FULL WORKING EXAMPLE
I just tried this out, and it found my house, no problem.
window.navigator.geolocation.getCurrentPosition(function(pos){
console.log(pos);
$http.get('http://maps.googleapis.com/maps/api/geocode/json?latlng='+pos.coords.latitude+','+pos.coords.longitude+'&sensor=true').then(function(res){
console.log(res.data);
});
})
There doesn't seem to be any built-in method for determining this, you'll have to use a map service or zipcode database.
I'm trying to figure out a way to display data collected from Google Analytics on my web site. I'm using NopCommerce, and I want to display this information/statistics in a view in the Admin Section.
There might be many ways to achieve this, and after searching the web I found some examples using JavaScript, but I couldn't find a good tutorial for this.
I have also looked into integrating Google Analytics with C#, and I found this example: http://biasecurities.com/2012/02/using-the-google-analytics-api-with-asp-net-mvc/#comment-1310
A demo project can be downloaded from GitHub here: https://github.com/jgeurts/Analytics-Example
However the demo project doesn't seem to work as the google URL (https://www.google.com/analytics/feeds/accounts/default) is no longer in use.
As I'm using a MVC application it would be preferable to make this happen by applying the Google Analytics logic within a Controller and displaying it in a view. Or something like that.
Google provides a query tool to experiment with here, so it shouldn't be to hard extracting data from Google Analytics and display the data on the website: https://ga-dev-tools.appspot.com/explorer/
Has anyone been able to successfully display Google Analytics data on their website?
In case some one else is having the same problem here's what I did and it pretty much answers the question.
1.
Here is the basic code for a API client that access data from Google Analytics via your Google Service Account. https://developers.google.com/api-client-library/dotnet/guide/aaa_oauth#service_account
In order to make this application work you need to have several things ready before you start coding.
*Google Analytics Account - once registered a "tracker" code is generated for you to put on each webpage you want to track. You may not see any statistics right away and it can take up to 24h before any statistics are shown in the Google Analytics Dashboard.
An OAuth Authorisation (API-Key) with CLIENT_ID, CLIENT SECRET and EMAIL ADRESS (This is not your normal email but a service account email that is created for you when you make an OAuth Authorisation).
console.developers.google.com/
A serverkey, can also be created here: console.developers.google.com/.
You can also create a browser key, haven't bothered with that though and don't know what it does.
Finally you need a certificate key. Your application will only be able to access your Google Analytics account by using the key and credentials. The key is an encrypted p.12 file. You can find the key in https://code.google.com/apis/console/.
Here is a guide for the key: http://www.pimcore.org/wiki/display/PIMCORE/Setup+Google+Analytics+Reporting+with+OAuth2+Service+Accounts+(since+1.4.6)
2.
Now that you have all keys and credentials you need it is time to start looking at the code I linked in "1". Here is the basic for it again: https://developers.google.com/api-client-library/dotnet/guide/aaa_oauth#service_account
Create a console application and implement the code above.
Note: your not making a "Google Plus service" so you have to change those parts for "AnalyticsService". Go to manage nuget and install packages:
Google Apis Core Library
Google Apis Client Library
Google Apis Auth Client Library
Google Apis Analytics.v3 Library
Google GData Client (This provides properties used to query data, metrics, demensions etc)
Google GData Extensions Library
Analytics
Might forgot something but here are the namespaces I use:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Text;
using System.Threading.Tasks;
using System.Security.Cryptography.X509Certificates;
using Google.Apis.Auth.OAuth2;
using Google.Apis.Services;
using Google.Apis.Analytics.v3;
3
Finally, here's is some of my code. Note I'm creating a new Analytics as supposed to "new ServiceAccountCredentials" as in the code from Google. That's the main difference:
Retrieve data from Google Analytics API with .NET, multiple metrics?
With this I'm able to access and query data from Google Analytics account. The best part is that you don't have to log in to Google for this as the key and credentials gives you access to the account data directly.
I will migrate this code to MVC now I might make an update later on for how to implement this Analytics client in Mvc.
This document explains how to get Google Access tokens and use them to get Google Analytics data to be displayed in our websites.
Example: A live example is available in
https://newtonjoshua.com
Note: Use the same Gmail account for all the below steps.
STEP 1: Set Up Google Analytics
Follow the below steps to set up Google Analytics on your website
Sign in to your Analytics account.
Select the Admin tab.
Select an account from the drop-down menu in the ACCOUNT column.
Select a property from the drop-down menu in the PROPERTY column.
Under PROPERTY, click Tracking Info -> Tracking Code.
To collect data, you must copy and paste the Analytics tracking code
into the source code on every web page you wish to track.
Once you have the JavaScript tracking code snippet for your
property, copy the snippet exactly without editing it.
Paste your tracking code snippet (unaltered, in its entirety) before
the closing </head> tag on every web page on your site you wish to
track.
Once you have successfully installed Analytics tracking, it may take
up to 24 hours for data such as traffic referral information, user
characteristics, and browsing information to appear in your reports
Refer to:
https://support.google.com/analytics/answer/1008080?hl=en
https://analytics.google.com
STEP 2: Get Tokens
Google Project:
To create a Google Cloud Platform project, open the Google Developers Console (https://console.developers.google.com) and click Create Project.
Enable OAuth 2.0 API access:
Your application will need to access user data and contact other Google services on your behalf. Use OAuth 2.0 to grant your app API access.
To enable that, you need a client ID:
Open the Google API Console Credentials page (https://console.developers.google.com/apis/credentials).
From the project, drop-down and select your project.
Select Create credentials and choose OAuth client ID.
Under Application type, select Web application, enter a Name and
set the Restrictions by entering JavaScript origins, Redirect URIs to point the website where you are planning to display the data, and then click Create.
Make note of the OAuth 2.0 client_id and client_secret. You will need them to configure the UI.
Get Authorization code:
Enter in browser:
https://accounts.google.com/o/oauth2/auth?scope=https://www.googleapis.com/auth/analytics.readonly&response_type=code&client_id={{
client_id}}&redirect_uri={{redirect_uri }}
&approval_prompt=force&access_type=offline
You will get redirected to
{{redirect_uri }}?code=={{authorization_code}}#
Get Refresh Token:
Send a POST request, possibly via a REST console to
https://www.googleapis.com/oauth2/v3/token?code={{authorization_code}}
&client_id={{client_id}}&client_secret={{client_secret}}
&redirect_uri={{redirect_uri }}&grant_type=authorization_code
You will get a JSON response with
{"refresh_token": refresh_token}
You can use the refresh token to get access token to access to Google APIs.
Get the Access Token:
Send a POST request to,
https://www.googleapis.com/oauth2/v3/token?client_id={{client_id}}
&client_secret={{client_id}}
&grant_type=refresh_token&refresh_token={{refresh_token}}
You will get a JSON with access_token in the response.
{access_token: {{access_token}}}
Example:
var access_token = '';
function getAccessToken(){
$.post('https://www.googleapis.com/oauth2/v3/token', {
client_id: {{client_id}},
client_secret: {{client_secret}},
grant_type: 'refresh_token',
refresh_token: {{refresh_token}}
}, function (data, status) {
if (status === 'success') {
access_token = data.access_token;
// Do something eith the access_token
}
else {
console.error(status);
}
});
}
Check Token validity:
Send a POST request to,
https://www.googleapis.com/oauth2/v1/tokeninfo?access_token={{access_token}}
Example:
function checkValidity() {
$.post('https://www.googleapis.com/oauth2/v1/tokeninfo', {
access_token:{{access_token}}
}).done(function (data, status) {
if (status === 'success') {
console.debug(data.expires_in);
var check = false;
check = data.hasOwnProperty('expires_in');
if (check) {
// Token is valid
}
if (!check) {
getAccessToken();
}
}
else {
console.debug(status);
}
})
.fail(function (data) {
console.error(data);
getAccessToken();
});
}
Step 3: Fetch Data
Embed API:
The GA Embed API is a JavaScript library that allows you to easily create and embed your GA dashboard on your website in a matter of minutes.
Refer to https://developers.google.com/analytics/devguides/reporting/embed/v1/getting-started.
Query Explorer:
Visit Embed API Query Explorer and authorize
https://ga-dev-tools.appspot.com/query-explorer/
Select the view for which you want to fetch the data.
Select the required metrics and dimensions.
Example:
Get Country Data (I want to know the number of users accessing my website from each country).
To get that data, select the metrics as 'users' and the dimensions as 'country'.
Click on Run Query.
You will find the analytics data for the query displayed in a table.
Copy the API Query URI. And add access_token={{access_token}} to the URI.
Example:
https://www.googleapis.com/analytics/v3/data/ga?ids={{ids}}&start-date=2015-07-01&end-date=today&metrics=ga%3Ausers&dimensions=ga%3Acountry&access_token={{access_token}}
Send POST request to the URIs to get the data in your browser.
Example:
function gaGetCountry() {
$.get('https://www.googleapis.com/analytics/v3/data/ga?' +
'ids={{ids}}' +
'start-date=2015-07-01&' +
'end-date=today&' +
'metrics=ga%3Ausers&' +
'dimensions=ga%3Acountry&' +
'sort=ga%3Ausers&' +
'filters=ga%3Ausers%3E10&' +
'max-results=50' +
'&access_token=' + {{access_token}},
function (data, status) {
if (status === 'success') {
// Display the Data
drawRegionsMap(data.rows);
} else {
console.debug(status);
}
});
}
Step 4: Display Data
Now we have gathered the data. Finally we have to display them on our website.
"Display live data on your site" is the title of Google Charts. And that is what we are going to do.
Refer to https://developers.google.com/chart/.
The following example will draw a GeoChart in the div with id='countryChart'.
// Draw country chart
function drawRegionsMap(data) {
var head = data[0];
head[0] = 'Country';
head[1] = 'Users';
for (var i = 1; i < data.length; i++) {
var d = data[i];
d[1] = Number(d[1]);
}
var chartData = google.visualization.arrayToDataTable(data);
var options = {
title: 'My Website is viewed from,',
domain: '{{Country Code eg: IN for India}}',
tooltip: {
textStyle: {
color: 'navy'
},
showColorCode: true
},
legend: {
textStyle: {
color: 'navy',
fontSize: 12
}
},
colorAxis: {
colors: ['#00FFFF', '#0000FF']
}
};
var chart = new google.visualization.GeoChart(document.getElementById('countryChart'));
chart.draw(chartData, options);
}
Refer to https://newtonjoshua.com to view the above example in action.
I'd recommend to use the new Google APIs Client Library for .NET (currently in beta). Information about the Analytics API can be found here. Note that the Client Library for .NET (google-api-dotnet-client) supersedes the .NET library for the Google Data API (google-gdata).
Unfortunately, there is no sample code available yet from Google (see this issue) but this question on SO should help.
If you don't want to login every time you access Analytics data, you can use OAuth 2.0 authorization with offline access. You have to grant initial access to your web application, though. This requires you to login once but you can use a refresh token later on.
To date, the easiest solution is to create a report of your Google Analytics data in Google Data Studio (free, native connector to GA), and share that report to embed in an <iframe>
See details on https://support.google.com/datastudio/answer/7450249?hl=en
You get
flexible vizualisation
security and control on the data being shared
0 code nor maintenance
result is being cached for better performance
I spent a couple of days trawling the Internet to get some sample ASP.NET code with no luck. I used Koffe14's method for authentication, and also Linda Lawton's excellent ASP.NET analytics example.
I've posted the code on my website. It's not MVC, but it might help other people who need to get data from Google analytics into an ASP.NET web page using the v3 Google API.
Check out embeddedanalytics.com (disclaimer - I work with them).
This is a simple yet powerful solution geared for people that don't want deal with learning the GA API and then having to link it to visualization (e.g. charts/graphs).
Basically define your charts and embed a snippet of code where you want the chart to show. We also support mechanisms so that it is easy to integrate into a custom built CMS or other web portal.
I need to track user details, for that client's location and IP address is needed.
I got IP address from
$this->input->ip_address();
in codiigniter. Now the problem is how can i make their location in google map by using their respective IP address
just use ipinfo.io at
http://ipinfo.io/
it uses a location api that we can post ip address and it will returns the location details as json:
we can able to display the loacation on map with the langitude and longitude details from json response to google Maps API.
Here is the code i used:
this script creates a Google Map instance with lattitude & longitude from json response:
jQuery(document).ready(function(){
jQuery.get("http://ipinfo.io/202.88.237.138", function (response)
{
var lats = response.loc.split(',')[0];
var lngs = response.loc.split(',')[1];
map = new GMaps({
el: '#map',
lat: lats, //latitude
lng: lngs //longitude
});
}, "jsonp");
});
and the map will displayed on:
<div style="border:1px solid red; height:745px;" id="map"></div>
Google Maps API gmaps.js is needed to run this..
As a viable (although often less accurate) alternative, the HTML5 spec includes Geolocation. As HTML 5 becomes more and more prevalent I think we can expect to see this become standard in the future. It also does not require the use of external web services or libraries. Everything you need to geolocate is built right into the clients browser.
I believe the primary method used is IP address as specified.
The Google Maps API will do the work of finding location using geoip for you. If the user is on a mobile device or has a more accurate way of locating themselves (like a GPS), it'll use that instead.
Here's a good starting point:
https://google-developers.appspot.com/maps/documentation/javascript/examples/map-geolocation
If you absolutely need to fetch location from IP only, there are third-party tools that you can scrape to get this information. You should make sure you have permission beforehand if you're using this in a larger project.
freegeoip.net provides a public HTTP API to search the geolocation of IP addresses. It uses a database of IP addresses that are associated to cities along with other relevant information like time zone, latitude and longitude.
You're allowed up to 15,000 queries per hour.
If you need more than that, you can run the freegeoip as a web server on your own infrastructure. See: freegeoip on github
i want to make multiple Markers google map by address or pincode like
i just add address or pincode in array and i will made multiple marker google map
for example
var address = new Array('Canada','Newyourk')
or may be pincode
var address = new Array('123456','654321')
my basic is html and javascript
That's done using Geocoding service of the API. More on this topis here: https://developers.google.com/maps/documentation/javascript/geocoding and here: https://developers.google.com/maps/faq#geocoder_exists.
I also advice you to read the whole API documentation. It's one the best API documentations out there with lots of useful examples and guides.