In this video tutorial we illustrate the implementation of Google Maps API.
Here we supply latitude and longitude values fetched by Geolocation API and feed it to Google Map API, which is turn returns the location on its MAP.
It has 4 variations:
ROADMAP (normal, default 2D map)
SATELLITE (photographic map)
HYBRID (photographic map + roads and city names)
TERRAIN (map with mountains, rivers, etc.)
HTML File
index.html
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | < !doctype html> <html> <head> <title>Geolocation API: Technotip.com</title> <meta charset="utf-8"/> <link href="css/myStyle.css" rel="stylesheet"/> <script src="js/jquery-1.10.1.min.js"></script> <script src="http://maps.google.com/maps/api/js?sensor=true"></script> <script src="js/myScript.js"></script> </head> <body> <p id="map"></p> </body> </html> |
Here we’ve added an id to paragraph tag. And included Google Map API’s javascript file within the head tag. We must include it before myScript.js, as we’ll be using Google Map API’s inside myScript.js
Javascript File: Google Map API
myScript.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | function success(position)
{
var googleLatLng = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var mapOtn={
zoom:10,
center : googleLatLng,
mapTypeId: google.maps.MapTypeId.ROAD
}
var Pmap= document.getElementById("map");
var map= new google.maps.Map(Pmap, mapOtn);
} |
Pass position.coords.latitude and position.coords.longitude values to LatLng constructor of Google Maps API, which converts it into googleLatLng object.
Set the options of Google Maps:
zoom takes value from 0 to 21.
We center the map to our users/visitors location.
map type: ROADMAP, SATELLITE, HYBRID, TERRAIN.
Full Javascript File: Google Map API
myScript.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 | $(document).ready(function(){
if( navigator.geolocation )
navigator.geolocation.getCurrentPosition(success, fail);
else
$("p").html("HTML5 Not Supported");
});
function success(position)
{
var googleLatLng = new google.maps.LatLng(position.coords.latitude,
position.coords.longitude);
var mapOtn= {
zoom:10,
center :googleLatLng,
mapTypeId:google.maps.MapTypeId.ROAD
}
var Pmap= document.getElementById("map");
var map= new google.maps.Map(Pmap, mapOtn);
}
function fail(error)
{
var errorType = {
0: "Unknown Error",
1: "Permission denied by the user",
2: "Position of the user not available",
3: "Request timed out"
};
var errMsg = errorType[error.code];
if(error.code == 0 || error.code == 2){
errMsg = errMsg+" - "+error.message;
}
$("p").html(errMsg);
} |
For explanation of other parts of above code:
Geolocation API – Success Handler: HTML5
Geolocation API – Error Handle: HTML5
Google Maps API Integration: HTML5
[youtube https://www.youtube.com/watch?v=UroKHzuuve8]
Note:
If you’re accessing this application via your desktop computer, then it may be showing you the location of your ISP’s(Internet Service Provider’s) local office location.
To get the accurate location, access our demo page via your smart phone.
Smartphone
1. Install Google Chrome browser.
2. Switch on your GPS and permit Google to access your location information, for testing purpose.
3. Visit our demo link(present above).
4. Move around and see your location information being updated in real-time.
5. We’ll teach you to make your application show real time data in coming videos, stay subscribed :-)
Hello any chance you can give me the sources codes or help me through to the start. Using Eclipe and which google api to work on that plz…..
@miky, We have a complete list of Geolocation API video Tutorials(with full free source code). We have not played with Eclipes much. Hope this will help you in some way ..happy coding :-)
How is it that you are running these Google Maps API’s without a KEY? I could not run the simple ones I wrote without first getting an API form Google and including it in this line of my HTML head: (the key here is a fake one),
My attempts to run this i the most up to date Chrome Browser keep telling me that “Permission is denied by the user”. Seems Chrome will not give me access to this geolocation facility.
@Ed, I’m using http://maps.google.com/maps/api/js?sensor=true in the header. Its a javascript library.
Try accessing our demo page(link present in above post), and click on ‘permit access’ button when browser asks you to ‘permit’ or ‘deny’ location access.
Hi. Thanks for the tutorial. Does it still work though? I get this error on my desktop Chrome browser.
Only secure origins are allowed (see: https://goo.gl/Y0ZkNV). [object Object]
its not working on chrome, try firefox, firefox is working!
@Jerry, as @Sundarananda Das said, it work in Mozilla Firefox. Google Chrome recently made some changes to their security policy so it’s not working. There are some workarounds though, which I’ll share in a video shortly.