Combining the what3words.js AutoSuggest Component with a Google Map | what3words
All tutorials

Combining the what3words.js AutoSuggest Component with a Google Map


The what3words JavaScript API wrapper provides components to make using the what3words API even easier. In this tutorial, we will go through using the autosuggest component in combination with a Google Map. We will add the search field using the component and then respond to its select event to place a pin on the map at the inputted location.

You will also need to sign up for a Google Maps developer account and be able to view other Google Maps tutorials at

We also have tutorials demonstrating it’s use with both Mapbox and LeafletJS.

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



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

<script src=""></script>

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. Sign up to obtain your free API key.



Using the AutoSuggest component

In one line you can have an input box which will call the what3words AutoSuggest API endpoint.


There are a number of ways you can configure the AutoSuggest component to better suit your use case, including clipping to country and custom validation errors.

For more on the AutoSuggest component see the what3words Autosuggest JavaScript Component.

Loading a Google Map

You’ll need access to the Google Maps API using your own Google Maps API key.

<script src=""></script>

Place the map on the page, centered at a location of your choosing.

// Create the Google Map
var map = new google.maps.Map(document.getElementById('map'), {
  center: {lat: 51.52086, lng: -0.195499},
  zoom: 13,
  mapTypeId: 'roadmap'

Position the component on the map

  #autosuggest {
      position: absolute;
      top: 50px;
      left: 9px;
      z-index: 9999;

  #wrapper {
    position: relative;
    height: 100%;

  #map {
    height: 100%;

  html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-size: 10px;

Tie the component to the styling.

<div id="wrapper">
  <div id="autosuggest">
    <what3words-autosuggest id="suggestComponent"/>
  <div id="map"></div>

Listen for the select event

Here we use an event listener to pick up when a user selects a 3 word address from the listed suggestions for their input. Here we output information to console for debugging purposes.

const input = document.getElementById("suggestComponent");
  input.addEventListener("select", (value) => {
    console.log("[EVENT:select]", value.detail);

Related tutorials

Back to top