HTML5 Geolocation

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

Locating the User's Position

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

Given that this feature may infringe on user privacy, user location information is unavailable unless the user consents.

Browser Support

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

Note: Geolocation is more accurate for devices with GPS, such as the iPhone.

HTML5 - Using Geolocation

Use the getCurrentPosition() method to obtain the user's position.

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

Example

var x = document.getElementById("demo");
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}

function showPosition(position) {
    x.innerHTML = "Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude;    
}

Example explanation:

• Check if geolocation is supported
• If supported, run the getCurrentPosition() method. If not, display a message to the user
• If getCurrentPosition() is successful, it returns a coordinates object to the function specified in the parameter showPosition
• showPosition() function retrieves and displays the latitude and longitude

The above example is a very basic geolocation script, without error handling.

Handling Errors and Rejections

The second parameter of the getCurrentPosition() method is used to handle errors. It specifies a function to run if it fails to get the user's location:

Example

function showError(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            x.innerHTML = "User denied the request for Geolocation."
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML = "Location information is unavailable."
            break;
        case error.TIMEOUT:
            x.innerHTML = "The request to get user location timed out."
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML = "An unknown error occurred."
            break;
    }
}

Error codes:

• Permission denied - User denied the geolocation request
• Position unavailable - Location information is unavailable
• Timeout - The request timed out

Displaying Results on a Map

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

Example

function showPosition(position) {
    var latlon = position.coords.latitude + "," + position.coords.longitude;

    var img_url = "http://maps.googleapis.com/maps/api/staticmap?center="
    + latlon + "&zoom=14&size=400x300&sensor=false";
    document.getElementById("mapholder").innerHTML = "<img src='" + img_url + "'>";
}

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

Google Maps Script

Information for a Given Location

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

Uses include:

• Updating local information
• Displaying points of interest around the user
• Interactive car navigation systems (GPS)

getCurrentPosition() Method - Return Data

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

Geolocation Object - Other Interesting Methods

watchPosition() - Returns the current position of the user and continues to return updated positions as the user moves (like a GPS in a car).

clearWatch() - Stops the watchPosition() method.

The following example shows the watchPosition() method. You need an accurate GPS device to test this (like an iPhone):

Example

var x = document.getElementById("demo");
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.watchPosition(showPosition);
    } else {
        x.innerHTML = "Geolocation is not supported by this browser.";
    }
}
function showPosition(position) {
    x.innerHTML = "Latitude: " + position.coords.latitude + 
    "<br>Longitude: " + position.coords.longitude; 
}