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 :-)