Google Maps Integration: HTML5


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.

globe-latitude-longitude

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]

YouTube Link: https://www.youtube.com/watch?v=UroKHzuuve8 [Watch the Video In Full Screen.]



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.

Google Maps: Demo

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

8 thoughts on “Google Maps Integration: HTML5”

  1. 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…..

      1. 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),

        1. 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.

    1. @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.

Leave a Reply

Your email address will not be published. Required fields are marked *