HTML 5 GeoLocation API

HTML 5 geolocation API is very popular method to get access to location of user if the user browser supports geolocation feature.
It uses various techniques to get the location information

  • GPS,
  • GSM/3G triangulation,
  • Wifi,
  • IP address, etc.

Consider the following code that find location of user in terms of latitude and longitude.

<p id="msg">Click the Button to Get Your Position:</p>
<button onclick="getLocation()">Find Me</button>

JavaScript Code

JavaScript Code
     var displayCoords=document.getElementById("msg");
     function getLocation() {
          if (navigator.geolocation) {
          } else {
          displayCoords.innerHTML="Geolocation API not supported by your browser.";
     function showPosition(position) {
          displayCoords.innerHTML="Latitude: " + position.coords.latitude +
          "<br />Longitude: " + position.coords.longitude;

Important features:

  1. Navigator
  2. Geolocation
  3. Function getCurrentPosition()
  4. Position object
  5. Coords.latitude
  6. Coords.longitude

You can also use the above coordinates to display the location using Google Maps.

Geolocation with Maps-Leaflet.js

You can get location on google maps using the latitude and longitude values returned by the geolocation.getCurrentPosition function.

<meta charset="utf-8">
<title>Geolocation with Leaflet.js</title>
<link rel="stylesheet" href="[email protected]/dist/leaflet.css">
<script src="[email protected]/dist/leaflet.js"></script> 
html, body {
  height: 100%

.map {
  height: 300px;

.btn {
  background-color: darkred;
  border: 0;
  color: #000;
  padding: 20px;
  text-shadow: 0 0 1px rgba(0, 0, 0, .4);
  text-decoration: none;
  margin:20px auto;
  display: inline-block;
  <a href="#" id="show" class="btn">Show Map</a>
  <div id="map" class="map"></div> 
  // Get current position successfully
function success(position) {
  var map, marker,
      latitude = position.coords.latitude,
      longitude = position.coords.longitude;
  // Instance map using leaflet
  map ='map').setView([latitude, longitude], 13);
  // Tile layer using key api at
  L.tileLayer('https://{s}{z}/{x}/{y}.png', {
    key: '760506895e284217a7442ce2efe97797',
    styleId: 103288,
    maxZoom: 16

  // Marker using leaflet
  marker = L.marker([latitude, longitude]).addTo(map);

  // Popup in leaflet
  marker.bindPopup('<p>Your location</p>').openPopup();

// Get current position fail
function error() {
  alert('Get current position fail. Please access codepen to get geolocation.');

// Init load document
var show = document.getElementById('show');

show.addEventListener('click', function(e) {
  if (!navigator.geolocation) {
    console.log("Browser doesn't support geolocation");
  } else {
    navigator.geolocation.getCurrentPosition(success, error);
}, false);


Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.