HTML5 GEOLOCATION

HTML5 GeoLocation used to know the geographical position of the user who is visiting our website.

The function getCurrentPosition() gets the GPS coordinates (longitude and latitude in decimal) of the user's position.

When we ask for this information, the browser will ask the user for permission before giving us his position. If the user accepts, you get that information, otherwise it will fail.

The GPS position obtained, will be more precise, if the user is using your browser on any device with GPS, and mobile type iPhone, Android or iPad tablet type, etc..

Syntax HMTL5 GeoLocation

navigator.geolocation.getCurrentPosition(showPosition)

Example HTML GeoLocation

We created a website "html5geo.htm" showing the user's GPS coordinates:

<!DOCTYPE html> <html> <body> <p>Click the button to get your coordinates GPS</p> <button onclick="getLocationGPS()">Get Location GPS</button> <p id="text1"></p> <script>   var txt=document.getElementById("text1");   function getLocationGPS()   {     if (navigator.geolocation)     {        navigator.geolocation.getCurrentPosition(showPositionGPS);     }     else     {        txt.innerHTML="HTML5 Geolocation is not supported by this browser.";      }   }   function showPositionGPS(position)   {     txt.innerHTML="Latitude = " + position.coords.latitude +      "<br />Longitude = " + position.coords.longitude;   } </script> </body> </html>

Explanation of above code:

With navigator.geolocation check if your browser supports HTML Geolocation.

If not supported, we show an error message "is not supported HTML5 Geolocation By This browser."

With navigator.geolocation.getCurrentPosition(showPositionGPS) we get an object that had a position on the "showPositionGPS" as a parameter.

With position.coords.latitude we get the X coordinate latitude of the position.

With position.coords.longitude get the Y coordinate longitude position.

With innerHTML change the text of the HTML element where we want to display the information.

With the help of GOOGLE MAPS, we can also display a map centered on the GPS position obtained.

<!DOCTYPE html> <html> <body> <p id="text">Click the button to get your coordinates</p> <button onclick="getLocation()">Get your coordinates</button> <div id="map1"></div> <script src="http://maps.google.com/maps/api/js?sensor=false"></script> <script>   var txt=document.getElementById("text");   function getLocation()   {     if (navigator.geolocation)     {        navigator.geolocation.getCurrentPosition(showPositionGPS,showErrorGPS);     }     else     {          txt.innerHTML="Geolocation is not supported by this browser.";     }   }   function showPositionGPS(position)    {     var latlon=position.coords.latitude+","+position.coords.longitude;     var img_url="http://maps.googleapis.com/maps/api/staticmap?center="     +latlon";     document.getElementById("map1").innerHTML="<img src='"+img_url+"' />";     }   function showErrorGPS(error)   {      switch(error.code)      {      case error.PERMISSION_DENIED:        txt.innerHTML="User denied the request for Geolocation."        break;     case error.POSITION_UNAVAILABLE:        txt.innerHTML="Location information is unavailable."        break;      case error.TIMEOUT:        txt.innerHTML="The request to get user location timed out."        break;     case error.UNKNOWN_ERROR:        txt.innerHTML="An unknown error occurred."        break;      }   } </script> </body> </html>

The "showPositionGPS" shows the map on our website, and can complicate everything you want with extra information:

function showPositionGPS(position) {   lati=position.coords.latitude;   long=position.coords.longitude;   latlon=new google.maps.LatLng(lati, long);   map1=document.getElementById('map1');   map1.style.height='250px';   map1.style.width='500px';   var mapOptions={     center:latlon,zoom:14,     mapTypeId:google.maps.MapTypeId.ROADMAP,     mapTypeControl:false,     navigationControlOptions:{style:google.maps.NavigationControlStyle.SMALL}   };   var map=new google.maps.Map(document.getElementById("map1"),mapOptions);   var marker=new google.maps.Marker({position:latlon,map:map,title:"You are here!"}); }