WEB DEVELOPER SITE
HTMLCSSJAVASCRIPTSQLPHPBOOTSTRAPJQUERYANGULARXML
 

HTML5 Geolocation


The HTML Geolocation API is utilized to find a client position


Locate the User's Position

The HTML Geolocation API is utilized to get the land position of a user.


Browser Support


Note

The numbers in the table indicate the main program form that completely bolsters Geolocation.

API
Geolocation 5.0 9.0 3.5 5.0 16.0

Note: Geolocation is substantially more exact for gadgets with GPS, similar to Google Pixel.


Using HTML Geolocation

The getCurrentPosition() technique is utilized to get the client position.

The model beneath returns the scope and longitude of the client's position:

Example

<script>
var x = document.getElementById("demo");
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(showPosition);
    } else {
        x.innerHTML = "Geolocation isn't upheld by this browser.";
    }
}
work showPosition(position) {
    x.innerHTML = "Latitude: " + position.coords.latitude +
    "<br>Longitude: " + position.coords.longitude;
}
</script>
Try it yourself »

Example explained:

  • Check if Geolocation is supported
  • If bolstered, run the getCurrentPosition() technique. If not, show a message to the user
  • If the getCurrentPosition() technique is effective, it restores a organizes article to the capacity determined in the parameter (showPosition)
  • The showPosition() work yields the Latitude and Longitude

The model above is a fundamental Geolocation content, with no blunder handling.


Handling Errors and Rejections

The second parameter of the getCurrentPosition() strategy is utilized to deal with erreor. It indicates a capacity to run on the off chance that it neglects to get the client's location:

Example

work showError(error) {
    switch(error.code) {
        case error.PERMISSION_DENIED:
            x.innerHTML = "User denied the demand for Geolocation."
            break;
        case error.POSITION_UNAVAILABLE:
            x.innerHTML = "Location data is unavailable."
            break;
        case error.TIMEOUT:
            x.innerHTML = "The ask for to get client area planned out."
            break;
        case error.UNKNOWN_ERROR:
            x.innerHTML = "An obscure blunder occurred."
            break;
    }
}
Try it yourself »

Displaying the Result in a Map

To show the outcome in a guide, you need access to a guide administration, similar to Google Maps.

In the model beneath, the returned scope and longitude is utilized to demonstrate the area in a Google Guide (utilizing a static image):

Example

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

    var img_url = "http://maps.googleapis.com/maps/programming interface/staticmap?center=
    "+latlon+"&zoom=14&size=400x300&sensor=false";

    document.getElementById("mapholder").innerHTML = "<img src='"+img_url+"'>";
}
Try it yourself »

Google Map Script
Step by step instructions to demonstrate an intuitive Google Map with a marker, zoom and drag options.


Location-explicit Information

This page exhibited how to demonstrate a client's situation on a map.

Geolocation is likewise helpful for area explicit data, like:

  • Up-to-date nearby information
  • Showing Points-of-enthusiasm close to the user
  • Turn-by-turn route (GPS)

The getCurrentPosition() Method - Return Data

The getCurrentPosition() strategy restores an article in the event that it is effective. The scope, longitude and exactness properties are constantly returned. Alternate properties are returned on the off chance that available:

Property Returns
coords.latitude The scope as a decimal number
coords.longitude The longitude as a decimal number
coords.accuracy The exactness of position
coords.altitude The elevation in meters over the mean ocean level
coords.altitudeAccuracy The elevation precision of position
coords.heading The heading as degrees clockwise from North
coords.speed The speed in meters per second
timestamp The date/time of the response

Geolocation object - Other intriguing Methods

watchPosition() - Returns the present position of the client and proceeds to return refreshed position as the client moves (like the GPS in a car).

clearWatch() - Stops the watchPosition() method.

The precedent underneath demonstrates the watchPosition() strategy. You need an exact GPS gadget to test this (like iPhone):

Example

<script>
var x = document.getElementById("demo");
function getLocation() {
    if (navigator.geolocation) {
        navigator.geolocation.watchPosition(showPosition);
    } else {
        x.innerHTML = "Geolocation isn't bolstered by this browser.";
    }
}
work showPosition(position) {
    x.innerHTML = "Latitude: " + position.coords.latitude +
    "<br>Longitude: " + position.coords.longitude;
}
</script>
Try it yourself »