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

Advertisements

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:

Navigator
Geolocation
Function getCurrentPosition()
Position object
Coords.latitude
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/leaflet@1.0.3/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.0.3/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>

Geolocation with Maps-Leaflet.js

Ads Blocker Detected!!!