Geolocation with HTML5 and javascript. Integration with Google Maps

New Products being introduced with HTML5 are many and some particularly interesting. Among these stands out, no doubt, support for geolocation, which can automatically detect the user's geographic location through the browser.

Using geolocation, in fact, with support for HTML5 browsers are able to track the location of the user using the IP address assigned by your ISP connection, the proximity to cell communication (for mobile connection) or via the ' GPS antenna may be integrated into the device. The position detection georafica, of course, occurs only after explicit consent of the person concerned (who will be notified of the request of the web page to make the tracking of the position, a request which will be able to consent or not).

The location returned by the browser is expressed by its coordinates (latitude and longitude) that can then be used by JavaScript. The new geolocation API is based on a new property of the navigator object: navigator.geolocation.

In order to check if the browser offers support for these new API for HTML5 is sufficient, therefore, conditional make a call like this:

 if (navigator.geolocation) {



  



 / / Browser-ready with support for HTML5 geolocation







 Else {}



  



 / / No support for geolocation







 }

Here is some simple Javascript code (to be inserted in the header of the page) for the detection of the user's geographic coordinates:

 if (navigator.geolocation) {



  



 navigator.geolocation.getCurrentPosition (mia_posizione);







 Else {}



  



 alert ('The geo-localization is not possible');







 }









 mia_posizione function () {



  



 var lat = position.coords.latitude;



  



 var lon = position.coords.longitude;



  



 document.getElementById ('location'). innerHTML = 'Your position:' + lat + ',' + lon;

  





 }

In the body of the page not only have to insert an element with id "position" within which the user coordinates will be written.

To see a working example click here .

GetCurrentPosition function ()

As you can see if your browser supports Geolocation getCurrentPosition veins called the function () which, in our example, one argument is passed as the callback on success.
Actually this works admits three parameters:

• callback on success;
• Callback on failure;
• options:
  • enableHighAccuracy: true or false, is to request the device to send the location with the highest level of accuracy (attivamndo, for example, the GPS device);
  • timeout: maximum duration of waiting for the detection of the position (in milliseconds);
  • maximumAge: maximum age after which the detection must be performed nuvo position tracking;

Here's an example of using a getCurrentPosition () with all three parameters allowed:

 



 navigator.geolocation.getCurrentPosition (



  



 success_callback, error_callback, {enableHighAccuracy: false});

 

• <<
• 1
• 2
• 3
• >>