HTML5 Geolocation API - Showing Map of users location ~ Web CodeHelpers

HTML5 Geolocation API - Showing Map of users location

HTML5 Geolocation API for getting users Map with marker :

in past Article i wrote about the HTML5 Geolocation API in details, check it out in the below link
HTML5 Geolocation API 
In this article i like to show example how we use in realtime for getting map of users location

Your Current Location MAP


Code :

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

<script type="text/javascript">

function loadYourLocation(){
    if (navigator.geolocation)
      {
      navigator.geolocation.getCurrentPosition(showPosition,showError);
      }
    else{
      document.getElementById('map').html("Geolocation is not supported by this browser.");
    }
}

function showPosition(position){
  var point = new google.maps.LatLng(position.coords.latitude,
                                       position.coords.longitude);
    // Initialize the Google Maps API v3
    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 15,
      center: point,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
    // Place a marker
    new google.maps.Marker({
      position: point,
      map: map
    });
  }
function showError(error){

   x = document.getElementById('map');
  switch(error.code)
    {
    case error.PERMISSION_DENIED:
      x.innerHTML="User denied the request for Geolocation."
      break;
    case error.POSITION_UNAVAILABLE:
      x.innerHTML="Location information is unavailable."
      break;
    case error.TIMEOUT:
      x.innerHTML="The request to get user location timed out."
      break;
    case error.UNKNOWN_ERROR:
      x.innerHTML="An unknown error occurred."
      break;
    }
}
</script>
</head>
<body>
  <div>
  <a onclick="loadYourLocation();">Check Your Location</a>
</div>
<div id="map" style="width: 500px; height: 400px;"></div>
</body>
</html>




0 comments :

Post a Comment

Subscribe updates via Email