Geolocation and the Google Maps API

Introduction

Geolocation helps us to find the coordinates or location of a user or device via some mechanism. Mostly they will use internal GPS to know the location. Geolocation API with the Google Maps API gives a better user experience. If we know the location of the user, it is more interesting to use one application. Using the Geolocation API, we can find the location easily. We will use the property of the W3C Geolocation Standard to determine the user's location. The property used in navigator.geolocation. Whenever we are using a sensor like GPS to determine the user's location then we will set this parameter as true otherwise false.
NOTE: If we are using the Geolocation API then we can set this parameter to false.

  <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=true">
    </script>

Geolocation API

The geolocation API has three methods. These three methods are present in the geolocation attribute of the navigator object. The three functions are:
  • getCurrentPosition() - This method will get the current position of the user one time. We can pass two callbacks to this function: one for success response and second for the error. The success callback takes a position object as its argument. We will have our latitude and longitude present in that position object. We can also pass a third optional argument which is PositionOptions. The position object always returns coords.latitude, coords.longitude and coords.accuracy. 
  • watchPosition() - This method will return the user's current location and keep on watching the user's position and returns the associated object as when the user or device moves.
  • clearWatch() - This method will stop returning the user's position. Takes the id of watchPosition as an argument. Stops the watchPosition() method.
Now we will see an example where we will show the location of the user. We will open an info window with a message that "User location is here".  Now we will see an example where we will show different errors on the info window if the Geolocation API is failed or our browser doesn't support this API.


<!DOCTYPE html>
<html>

<head>
  <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
  <meta charset="utf-8">
  <title>Google Map</title>
  <style>
    #Gmap {
      height: 600px;
      width: 100%;
    }

    html,
    body {
      height: 100%;
      margin: 0;
      padding: 0;
    }
  </style>
</head>

<body>
  <div id="Gmap"></div>
  <script>
    var map;
    var infoWindow;
    function initMap() {
      var mapOptions = {
        streetViewControl: false,
        center: { lat: 21.291, lng: -157.821 },
        zoom: 2,
        mapTypeId: google.maps.MapTypeId.HYBRID,
      };
      map = new google.maps.Map(document.getElementById('Gmap'), mapOptions);
      infoWindow = new google.maps.InfoWindow;


      if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(geoSuccess, geoError)
      } else {
        infoWindow.setContent("Browser don't support geolocation.");
      }

      function geoSuccess(position) {
        var locationLatLng = {
          lat: position.coords.latitude,
          lng: position.coords.longitude
        };

        infoWindow.setPosition(locationLatLng);
        infoWindow.setContent("User Location Is Here");
        infoWindow.open(map);
        map.setCenter(locationLatLng);
      }

      function geoError(positionError) {
        infoWindow.setContent(positionError.message);
      }
    }

  </script>
  <script async defer
    src="https://maps.googleapis.com/maps/api/js?key=API_KEY&callback=initMap">
    </script>
</body>
</html>

Comments