Google Maps and Geolocation

Last reviewed on September 21, 2018

The Google Maps JavaScript library exposes several constructor functions that allow you to create a map and different things on a map. If you're not familiar with constructor functions, read my other post, JavaScript Constructor Functions and Classes.

To get started, you will need to create an API key. Then, create an HTML page with the following template, which you can also find on the getting started documentation.

<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0" />
    <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 src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
    <script>
      let map = new google.maps.Map(document.getElementById('map'), {
        center: new google.maps.LatLng(34.043514, -118.26621),
        zoom: 8,
      });
    </script>
  </body>
</html>

Replace YOUR_API_KEY with your API key. Note, the API key isn't required, but you will be rate limited.

The first thing you'll notice is that a map is created using the Map constructor function under the google.maps namespace. The first argument is an element on the page for where the map will be placed, and the second argument is an object containing some configuration options.

Adding a Point on the Map

To add a point on the map, we need to use two constructor functions. First, we will create a position object using the google.maps.LatLng() constructor function:

let home = new google.maps.LatLng(-34.397, 150.644);

Second, we can use the google.maps.Marker() constructor function to create a marker on the map at the home position:

let homeMarker = new google.maps.Marker({
  map: map,
  position: home,
  animation: google.maps.Animation.DROP,
});

The google.maps.Marker constructor function needs access to the map object so it knows where to put the marker, and the position which should be an instance of google.maps.LatLng.

Info Windows

We can add an info window to a specific position on our map using the google.maps.InfoWindow(obj) constructor function:

let infoWindow = new google.maps.InfoWindow({
  content: '<strong>Hi!</strong>',
  position: home,
});

infoWindow.open(map);

The info window won't be visible by default. You need to call the open() method on the InfoWindow instance for it to appear.

Events

Let's add a click event to the map marker we just created so that when it is clicked, the info window will open.

google.maps.event.addListener(homeMarker, 'click', function (event) {
  infoWindow.open(map);
});

Event listeners can be applied to different map objects like markers, info windows, and the map itself.

Geocoding and Reverse Geocoding

Google Maps has a constructor function that allows you to geocode and reverse geocode. Geocoding is the process of taking an address and converting it into coordinates. Reverse geocoding does the opposite and takes coordinates and converts it into an address.

Geocoding and reverse geocoding can be achieved using the google.maps.Geocoder() constructor function.

let geocoder = new google.maps.Geocoder();

geocoder.geocode(
  {
    address: '3650 McClintock Ave., Los Angeles, CA 90089',
  },
  function (geocoderResults) {
    let latlng = geocoderResults[0].geometry.location; // a LatLng object
    console.log(latlng.lat(), latlng.lng());
  }
);

Reverse geocoding can be achieved using the same geocode method but passing in location instead of address:

let geocoder = new google.maps.Geocoder();

geocoder.geocode(
  {
    location: home,
  },
  function (geocoderResults) {
    console.log(geocoderResults);
  }
);

Here is a working demo.

The Geolocation API

The Geolocation API built into the browser can be used with Google Maps to create interesting map applications. Several sources are used to determine a user's location including Wifi, IP geolocation, and the GPS on mobile devices.

To get a user's current position, we can use the navigator.geolocation.getCurrentPosition function:

let successHandler = function (position) {
  console.log(position.coords.latitude, position.coords.longitude);
};
let errorHandler = function (error) {};
let options = {};
navigator.geolocation.getCurrentPosition(successHandler, errorHandler, options);

A position object is passed to the success callback function, which contains several useful properties:

Note that navigator.geolocation.getCurrentPosition is asynchronous.

We can also watch a user's position, and get notified when it changes.

let successHandler = function (position) {
  console.log(position.coords.latitude, position.coords.longitude);
};
let errorHandler = function (error) {};
let options = {};
navigator.geolocation.watchPosition(successHandler, errorHandler, options);

The watchPosition method also receives the same position object as getCurrentPosition. The watchPosition method returns an identifier that can be used to clear the watch using the method clearWatch, similar to how setInterval returns an identifier that can be used to clear the interval using clearInterval.

The options object is optional in both methods. Here is a list of properties you can pass as options:

enableHighAccuracy: provides a hint to the request that it wants the best possible result. The drawback is that it could be slower and use more power consumption which isn't always ideal on a mobile device
timeout: the maximum length of time to wait for a response in milliseconds
maximumAge: the maximum age of a cached position that the page will be willing to accept. In milliseconds with a default value of 0, which means it wont pull a position object from cache.

References

MDN navigator.geolocation