D3 Examples - HTML5 DEMO: GEOLOCATION

HTML5 DEMO: GEOLOCATION

The following demo intends to describe how to use the HTML5 Geolocation feature. The gist includes three step files:

STEP1 index3.html: how to access to the geographical position of a user using the position object;

STEP2 index2.html: how to show on a Google Map the geographical position of a user;

STEP3 index.html: it is equal to the previous one except for the error handling.

xxxxxxxxxx
 
<!DOCTYPE html>
  <html lang="en">
    <head>
      <meta charset=utf-8>
      <title>HTML5 Demo: geolocation</title>
    </head>
  <body>
    <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
    <div id="container">
      <div id="mapcanvas" style="height: 500px; width: 960px"></div>
    </div>
    <script>
      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(success, error);
      } else {
        error('not supported');
      }
      
      function success(position) {
        console.log(position)
        var latlng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
        var myOptions = {
          zoom: 15,
          center: latlng
        };
        var map = new google.maps.Map(document.getElementById("mapcanvas"), myOptions);
        
        var marker = new google.maps.Marker({
            position: latlng, 
            map: map, 
            title:"You are here! (at least within a " + position.coords.accuracy + " meter radius)"
        });
      }
      function error(msg) {
        switch(error.code) {
          case error.PERMISSION_DENIED:
            alert("User denied the request for Geolocation.")
            break;
          case error.POSITION_UNAVAILABLE:
            alert("Location information is unavailable.")
            break;
          case error.TIMEOUT:
            alert("The request to get user location timed out.")
            break;
          case error.UNKNOWN_ERROR:
            alert("An unknown error occurred.")
            break;
        }
      }
    </script>
</body>
</html>
    