Tutorials | what3words
We use cookies, including third party cookies, to improve your experience and for marketing purposes. By continuing to browse we assume you have consented to their use.Learn more
got it
All tutorials

Displaying the what3words grid on a Google Map

intermediate

The what3words API supports the ability to obtain a section of the 3m x 3m what3words grid in GeoJSON format, making it very simple to display on a map.

This tutorial will show you how to integrate the what3words grid onto Google Maps. We also have tutorials demonstrating its use with both Mapbox and LeafletJS.

You will also need to sign up for a Google Maps developer account and be able to view other Google Maps tutorials at https://developers.google.com/maps/documentation/javascript/tutorial

You will need a what3words API key to complete this tutorial.

2

Installation

To load the JavaScript wrapper for the what3words API, use a script tag like the one in the following example:

<script src="https://assets.what3words.com/sdk/v3/what3words.js?key=YOUR_API_KEY"></script>
Copied

The URL contained in the script tag is the location of a JavaScript file that loads everything you need for using the JavaScript wrapper for the what3words API.

The key parameter contains your application’s API key.

You will also need to load the Google Maps API, for example:

<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_GOOGLE_API_KEY"></script>
Copied

The key parameter contains your Google Maps API key.

3

Map style

Within the head tag, we need to set style properties for the Google Map. In this example, we’ll set the map to display full screen.

<style>
  #map {
    height: 100%;
  }

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

Map initialisation

Within the body tag, we need to create a new div element to contain the map component, as well as initialise it using the Google Maps JavaScript API.

<div id="map"></div>
<script>
  // Create the Google Map
  let map = new google.maps.Map(document.getElementById("map"), {
    center: { lat: 51.52086, lng: -0.195499 },
    zoom: 19
  });
</script>
Copied
5

Grid overlay

The what3words grid can be displayed on top of a Google Map by passing GeoJSON data to the maps Dataobject.

Because only a segment of grid section can be requested, we need to obtain a new grid section each time the map is panned or zoomed.

<script>
  var gridData;

  // Add the what3words grid to the Google Map data layer once the desired zoom level is meet
  map.addListener('bounds_changed', function() {
    const zoom = map.getZoom();
    const loadFeatures = zoom > 17;

    if (loadFeatures) { // Zoom level is high enough
      var ne = map.getBounds().getNorthEast();
      var sw = map.getBounds().getSouthWest();

      // Call the what3words Grid API to obtain the grid squares within the current visble bounding box
      what3words.api
        .gridSectionGeoJson({
          southwest: {
            lat: sw.lat(), lng: sw.lng()
          },
          northeast: {
            lat: ne.lat(), lng: ne.lng()
          }
        }).then(function(data) {
          if (gridData !== undefined) {
            for (var i = 0; i < gridData.length; i++) {
                map.data.remove(gridData[i]);
            }
          }
          gridData = map.data.addGeoJson(data);
        }).catch(console.error);
    }

    // Set the grid display style
    map.data.setStyle({
      visible: loadFeatures,
      strokeColor: '#777',
      strokeWeight: 0.5,
      clickable: false
    });
  });
</script>
Copied

Related tutorials

Back to top