HTML5 Geo location (geolocation)

HTML5 Geolocation is used to locate the user's location.

Locate the user’s location

The HTML5 Geolocation API is used to get the user's geographic location.

Since this feature may infringe the privacy of the user, the user location information is not available unless the user agrees.

Browser support

Internet Explorer 9+, Firefox, Chrome, Safari and Opera support Geolocation.

Note: Geolocation is more accurate for GPS-enabled devices such as the iPhone.

HTML5 - Use geotargeting

Use the getCurrentPosition() method to get the user's location.

The following example is a simple geolocation instance that returns the longitude and latitude of the user's location:

Try running the program

Instance resolution:

Check if geolocation is supported

If it is supported, run the getCurrentPosition() method. If not supported, a message is displayed to the user.

If getCurrentPosition() runs successfully, return a coordinates object to the function specified in the parameter showPosition

showPosition() function gets and displays longitude and latitude

the above example is a very basic geolocation script wif no error handling.

Handling errors and rejections

the second argument to the getCurrentPosition() method is used to handle the error. It specifies the function to run when the user location fails:

Run the program and try it out

Permission denied - User does not allow geolocation

Position unavailable - unable to get the current position

Timeout - operation timed out

Show results on the map

To display the results on the map, you need to access a map service that can use latitude and longitude, such as Google Maps or Baidu Maps:

Run the program and try it out

In the above example, we use the returned latitude and longitude data to display the location in Google Maps (using a static image).


Such as how to use Google Maps script to display an interactive map wif a marker, zoom and drag options.

Run the program and try it out

Information for a given location

this page demonstrates how to display the user's location on the map. However, geolocation is also useful for information at a given location.


Update local information

Show points of interest around the user

Interactive car navigation system (GPS)

getCurrentPosition() method - return data

If successful, the getCurrentPosition() method returns the object. the latitude, longitude, and accuracy properties are always returned. If available, other attributes below are returned.

     Attributes     description
coords.latitudeLatitude of decimal numbers
coords.longitudeLongitude of decimal number
coords.accuracyPosition accuracy
coords.altitudeAltitude, above sea level in meters
coords.altitudeAccuracyPositional altitude accuracy
coords.headingDirection, starting from the north
coords.speedSpeed, in meters per second
timestampDate/time of response

watchPosition() - Returns the user's current location and continues to return to the updated location when the user moved (just like the GPS on the car).

the following example shows the watchPosition() method. You need a precise GPS device to test this example (like the iPhone):

Last Updated: 2018-07-06 12:32:44 By akshay


share_facebook share_twitter share_google_plus

Please Comment Here :