How To Use HTML5 GeoLocation API With Google Maps

In this tutorial we are going to learn how to use the Geolocation API to get your current latitude and longitude, from these results we can then connect to the Google Maps API to display your location in the browser.

The Geolocation API

The Geolocation API defines an interface used to get location information of the visitor, from this interface you can return the latitude and longitude of the current visitor. Common sources of the location are GPS or IP Address. As this API will display current location of the visitor it can potentially become a privacy problem, which is why this API will only work with the permission of the visitor.

Geolocation API Browser Support

Geolocation is supported on the following browsers: - Google Chrome

Firefox 3.5 and higher
Opera 10.6 and higher
Internet Explorer 9 and higher
Safari 5

Check If Browser Supports HTML5 GeoLocation API

Before you can get the visitors location it is important that you check to see if the visitors browser will support the Geolocation API. If it doesn't support the Geolocation API then it will error when trying to get the location. Therefore use the following Javascript to first check is the browser supports Geolocation API.


if (navigator.geolocation) {
  navigator.geolocation.getCurrentPosition(success);
} else {
  error('Geo Location is not supported');
}

Get Visitors Current Position

To get the visitors current location you need to use the navigator object, from here you can access the geolocation API to call the method getCurrentPosition method. This accepts three parameters: - Success callback function

Error callback function
Position options

In this tutorial we are just going to use a success callback function as we only want something to happen when the API successfully returns the position of the visitor.

navigator.geolocation.getCurrentPosition(success);

function success(position) {
     var lat = position.coords.latitude;
     var long = position.coords.longitude;
}

That's all you need to get the latitude and longitude of the current visitor, now we have this we can apply coordinates to the Google Map API to display the location.

Add Your Position To Google Maps

Now we can apply the latitude and longitude to the Google Maps API, first we need to include the Google Maps javascript file to your page.


<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

Now add the following javascript code to your application to add a Google map to a div with an ID of mapcontainer. This map will locate on the coordinates of the visitor and place a marker on this exact position.


var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  
  var options = {
    zoom: 15,
    center: coords,
    mapTypeControl: false,
    navigationControlOptions: {
    	style: google.maps.NavigationControlStyle.SMALL
    },
    mapTypeId: google.maps.MapTypeId.ROADMAP
  };
  var map = new google.maps.Map(document.getElementById("mapcontainer"), options);

  var marker = new google.maps.Marker({
      position: coords,
      map: map,
      title:"You are here!"
  });

Full HTML Code

Here is the full HTML code that you will use to display the map of your visitor current location. Click the allow button to let the browser find your location.


<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>

document.querySelector('article').appendChild(mapcanvas);

var coords = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

var options = { zoom: 15, center: coords, mapTypeControl: false, navigationControlOptions: { style: google.maps.NavigationControlStyle.SMALL }, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("mapcontainer"), options);