Saturday, January 28, 2012

How to use Google maps with Geolocation API in HTML5?

From my previous articles we came to know how to use Geolocation API in HTML5. This article provides a sample that demonstrates how to integrate the coordinates(Latitude, Longitude) that we got to a map service like Google maps. In this sample we use two call back functions, one to integrate the coordinates with the Google maps and the other to handle the errors.

The below code snippet shows the usage of two call back functions and to detect whether our browser supports Geolocation API or not.

Get current location:

function getCurrentLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showMyPosition,showError);
    }
  else
   {
    alert("No, Geolocation API is not supported by this browser.");
    }
 }

The below code snippet shows how to integrate the latitude and longitude that we get to Google maps.

Show my position:

function showMyPosition(position)
{
var coordinates=position.coords.latitude+","+position.coords.longitude;
var map_url="http://maps.googleapis.com/maps/api/staticmap?center="
+coordinates+"&zoom=14&size=300x300&sensor=false";
document.getElementById("googlemap").innerHTML="<img src='"+map_url+"' />";
}

The below code snippet shows how to handle the errors that we get while using Geolocation API.

Show error:

function showError(error)
 {
  switch(error.code)
  {
  case error.PERMISSION_DENIED:
  alert("This website does not have permission to use the Geolocation API")
  break;

  case error.POSITION_UNAVAILABLE:
  alert("The current position could not be determined.")
  break;

  case error.TIMEOUT:
  alert("The current position could not be determined within the specified time  out period.")
  break;

  case error.UNKNOWN_ERROR:
  alert("The position could not be determined due to an unknown error.")
  break;
  }
 }

Example:

<!DOCTYPE html>
<html>
<body>
<button onclick="getCurrentLocation()">Click to get your location</button>
<div id="googlemap"></div>
<script>

function getCurrentLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showMyPosition,showError);
    }
  else
   {
    alert("No, Geolocation API is not supported by this browser.");
    }
  }

function showMyPosition(position)
{
var coordinates=position.coords.latitude+","+position.coords.longitude;
var map_url="http://maps.googleapis.com/maps/api/staticmap?center="
+coordinates+"&zoom=14&size=300x300&sensor=false";
document.getElementById("googlemap").innerHTML="<img src='"+map_url+"' />";
}

function showError(error)
 {
  switch(error.code)
  {
  case error.PERMISSION_DENIED:
  alert("This website does not have permission to use the Geolocation API")
  break;

  case error.POSITION_UNAVAILABLE:
  alert("The current position could not be determined.") 
  break;

  case error.TIMEOUT:
  alert("The current position could not be determined within the specified time  out period.")
  break;

  case error.UNKNOWN_ERROR:
  alert("The position could not be determined due to an unknown error.")
  break;
  }
 }
</script>
</body>
</html>

Sample Output:



How to use Google maps with Geolocation API in HTML5

Demo:



1 comments:

Subscribe via Email