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.

Advertisements

<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:

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!!!