Skip to content
Home ยป HTML 5 GeoLocation API

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

    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.

    <html>
<head>
<meta charset="utf-8">
<title>Geolocation with Leaflet.js</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css">
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script> 
<style>
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;
}
</style>
</head>
<body>
  <a href="#" id="show" class="btn">Show Map</a>
  <div id="map" class="map"></div> 
  <script>
  // Get current position successfully
function success(position) {
  var map, marker,
      latitude = position.coords.latitude,
      longitude = position.coords.longitude;
  
  // Instance map using leaflet
  map = L.map('map').setView([latitude, longitude], 13);
  
  // Tile layer using key api at cloudmade.com
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    key: '760506895e284217a7442ce2efe97797',
    styleId: 103288,
    maxZoom: 16
  }).addTo(map);

  // 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) {
  e.preventDefault();
  if (!navigator.geolocation) {
    console.log("Browser doesn't support geolocation");
  } else {
    navigator.geolocation.getCurrentPosition(success, error);
  }
}, false);
  </script>
</body>
</html>
    Previous
    Next