HTML Geolocation

Geo-location is used to identify or share the geographic location of a user through different data collection mechanisms. It is generally used for restaurants and local businesses.

Geolocation is a device-specific API which means that browsers or devices must support geolocation in order to use it through web applications.

To use the Geolocation map, user must get an API key "Google Cloud Platform Console" and add to his mobile app, website, or web server.

Getting API Key

  1. Go to the Google Cloud Platform Console.
  2. From the Project drop-down menu, select or create the project for which you want to add an API key.
  3. From the Navigation menu, select APIs & Services > Credentials.
  4. On the Credentials page, click Create credentials > API key. The API key created dialog displays your newly created API key.
  5. On the dialog, click Restrict Key.
  6. On the API key page, under Key restrictions, set the Application restrictions.
    • Select HTTP referrers (web sites).
    • Add the referrers.
    • Click Save.

Geolocation Code

Copy the below code and enjoy features of Geolocation

<!DOCTYPE html>
<html>

    <head>
        <title>Geolocation</title>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <style>
            /* Always set the map height explicitly to define the size of the div
             * element that contains the map. */
            #map {
              height: 100%;
            }
            /* Optional: Makes the sample page fill the window. */
            html, body {
              height: 100%;
              margin: 0;
              padding: 0;
            }
        </style>
    </head>
  
    <body>
        <div id="map"></div>
        <script>
          // Note: This example requires that you consent to location sharing when
          // prompted by your browser. If you see the error "The Geolocation service
          // failed.", it means you probably did not give permission for the browser to
          // locate you.
          var map, infoWindow;
          function initMap() {
            map = new google.maps.Map(document.getElementById('map'), {
              center: {lat: -34.397, lng: 150.644},
              zoom: 6
            });
            infoWindow = new google.maps.InfoWindow;

            // Try HTML5 geolocation.
            if (navigator.geolocation) {
              navigator.geolocation.getCurrentPosition(function(position) {
                var pos = {
                  lat: position.coords.latitude,
                  lng: position.coords.longitude
                };

                infoWindow.setPosition(pos);
                infoWindow.setContent('Location found.');
                infoWindow.open(map);
                map.setCenter(pos);
              }, function() {
                handleLocationError(true, infoWindow, map.getCenter());
              });
            } else {
              // Browser doesn't support Geolocation
              handleLocationError(false, infoWindow, map.getCenter());
            }
          }

          function handleLocationError(browserHasGeolocation, infoWindow, pos) {
            infoWindow.setPosition(pos);
            infoWindow.setContent(browserHasGeolocation ?
                                  'Error: The Geolocation service failed.' :
                                  'Error: Your browser doesn\'t support geolocation.');
            infoWindow.open(map);
          }
        </script>
        <script async defer
        src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMap">
        </script>
    </body>

</html>