HTML5 Geolocation

Another addition to the web developer’s toolkit is the addition of the geolocation api. This new api allows us to make scripted requests to the host device to request location specific information.

How does it work?

[crayon]

[/crayon]

Let’s take a look at the first example. This should display the users LAT/LON and how accurate the results are using a distance in Meters

Built-in Functions

  • getCurrentPosition
  • watchPosition – Resends data if device moves

Options

  • enableHighAccuracy – True or False
  • timeout – Milliseconds
  • maximumAge – Milliseconds

Diplaying Location on a Map

We are going to tap into the newest Google Maps implementation to take the Coordinates we received and post them back to a map

First we need to add a call to the Google Maps API. In this example we’ll forgo the API key but it would be necessary if you are going to handle alot of requests each day

[crayon]


[/crayon]

Notice the sensor=true appended to the end of the Google Maps API call. This is telling the API that we wish to use device sensor(GPS) information if present.

We can read up more on the new JavaScript API for Google Maps here.

The Script

[crayon]

[/crayon]

View the full Example Here