HTML5 Geolocation – HTML API

by Admin · Published March 12, 2018 · Updated March 12, 2018

HTML5 Geolocation is application programming interface which is used to get the geographical position of a user. It will locate the client positions via map or coordinates
The HTML5 Geolocation API is used to get the geographical position of a user. Unfortunately, since this can compromise user privacy, the position is not available unless the user approves it. W3C has developed a set of APIs to effectively allow the user or client-side device to retrieve geographic positioning information with JavaScript.

HTML5 Geolocation Supported Devices

Firefox 3.5+
Chrome 5+
iPhone Safari
Opera 10.6+
Opera Mobile 10.1+
Safari 5+
iPhone 3.0+
Android 2.0+
Internet Explorer 9+
Symbian (S60 3rd & 5th generation)
Palm WebOS 2.0+
Blackberry OS 6
Maemo

Working of Browser Geolocation

To summarize the location of a client, one would typically have to test the IP address of the of the system and stroke the reasonable guess as to the where that system was located .The retrieval of geographic positioning information is done with java script.

One substantial application that uses to find geographical positioning is Google Maps.

	
<!DOCTYPE html>
<html>
<body data-rsssl=1>
    <p id="start">Click the button to get your coordinates:</p>
    <button onclick="getLocation()">click</button>
    <script>
    var myStartVariable = document.getElementById("start");

    function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(CurrentPosition); } else { myStartVariable.innerHTML = "This browser is supporting Geolocation."; } }

    function CurrentPosition(position) { myStartVariable.innerHTML = "Current Latitude: " + position.coords.latitude + "<br />Current Longitude: " + position.coords.longitude; }
    </script>
</body>
<script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'}),_trfd.push({'ap':'cpsh'},{'server':'sg2plcpnl0002'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/tcc/tcc_l.combined.1.0.6.min.js'></script></html>

Run

Displaying the Result in a Map


<!DOCTYPE html>
<html>
<body data-rsssl=1>

<p id="demo">Click the button to get your position.</p>

<button onclick="getLocation()">Try It</button>

<div id="mapholder"></div>

<script>
var x = document.getElementById("demo");

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

function showPosition(position) {
    var latlon = position.coords.latitude + "," + position.coords.longitude;
    var img_url = "https://maps.googleapis.com/maps/api/staticmap?center="
    +latlon+"&zoom=14&size=400x300&key=AIzaSyBu-916DdpKAjTmJNIgngS6HL_kDIKU0aU";
    document.getElementById("mapholder").innerHTML = "<img src="&quot;+img_url+&quot;" data-lazy-src="https://+img_url+?is-pending-load=1" srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" class=" jetpack-lazy-image"><noscript><img src='"+img_url+"'></noscript>";
}
//To use this code on your website, get a free API key from Google.
//Read more at: https://www.w3schools.com/graphics/google_maps_basic.asp

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;
    }
}
</script>

</body>
<script>'undefined'=== typeof _trfq || (window._trfq = []);'undefined'=== typeof _trfd && (window._trfd=[]),_trfd.push({'tccl.baseHost':'secureserver.net'}),_trfd.push({'ap':'cpsh'},{'server':'sg2plcpnl0002'}) // Monitoring performance to make your website faster. If you want to opt-out, please contact web hosting support.</script><script src='https://img1.wsimg.com/tcc/tcc_l.combined.1.0.6.min.js'></script></html>

Conclusion:

The Geolocation is very useful while interacting with customers and giving them visual instructions. You can use it to show the location to your client and display it on your website.