What3words: A Technological Revolution in the Addresses Universe

Last Updated on October 7, 2020 by Aram

What3words is a new revolutionary concept in the vast universe of addresses, where you can tell an address of any given 3×3 square meter zone with only 3 words.

Have you ever thought that one day you can find or tell your address, the northern entrance of a shopping center or the location of a restaurant only through 3 words?

This is an amazing alternative to the traditional (latitude, longitude) coordinates addressing system, as it is much easier to memorize words than long decimal numbers or even having to learn the full address description that usually includes zip code, building number, building name, street name, neighborhood, city and/or state

For example, the address of the Big Ben is represented by the 3 words clean.wider.both, and the address of The Eiffel Tower is prices.slippery.traps and so on, just 3 words for any address.

You can still find different 3 words combinations for Big Ben or The Eiffel Tower, these will specify exact 3×3 square meter zones such the different corners of The Eiffel Tower.

You can explore the what3words addresses and find the 3 words representation of your house, your workplace or whatever location you like using the official what3words website’s map .

According to Chris Sheldrick, the CEO and co-founder of What3words, he says:

Frustration with international addresses and postcodes was an everyday part of life in the music business, and led me to formulate the concept of what3words – a global service which references every 3m square in the world with a unique 3 word address.

Rebecca Feng, a technical writer contributor in Forbes, has written a wonderful article about what3words from humanitarian perspective, you can read it here.

You can read more about what3words and their vision to support the world with easy to use addressing system in its website’s about page.

What3words Integrations

UK Government

With the rise of the COVID-19 cases, the UK government is now advising its people to request for medical emergency or necessary service using the what3words app particularly for people who are in rural or remote locations.

Aramex

Using the Aramex app and what3words, you can find your address and save it into your profile. and even you can arrange to receive an aramex shipment by only specifying your home address 3 words. Read more about this integration here.

Alexa and Uber

What3words have been integrated with Amazon Alexa and Uber, so you can easily request an Uber ride by just speaking the 3 words of your designated address to Alexa.

Smart Watches and Uber

And recently, what3words launched the 3WordGo App on Android WearOS as well as iOS/watch so you can request an Uber ride by saying the 3 words to your phone.

Mercedes Benz

Also what3words comes pre-installed in the navigation systems of several car models, starting with the Mercedes Benz Cars.

You can find more about how what3words is integrated into the cars navigational systems

The above are just few examples of how the usage and adoption of what3words is continuously rising in the markets.

Integrating What3words on your Website

So back to the technical perspective;

I will show you how can you integrate your website with what3words through their freshly updated and blazing fast APIs.

In order to integrate what3words with your website, you just need a free API key using what3word website developer’s section.

And if you are running a business, then you might need to look at the business plan of what3words

Once you follow the signup process and get the API Key, you can start integrating your website with what3words.

Google Maps JavaScript API

If you don’t have a Google Maps JavaScript API Key,

Then head to Google Maps API under Google Cloud Console and make sure you create a new project.

Once you create the project, make sure to open the Maps APIs and Services section.

You will be prompted with multiple Maps-related features, we need to select and enable the Maps JavaScript API.

You will see more details about it and here you will take Enable this API on your newly created project.

Click on Enable button to proceed with activating the Maps JavaScript API.

Next, we will need an API Key to use this API service, so let’s go obtain the key

From the left side menu (burger menu), navigate to APIs and Services then Credentials.

Then click on Create Credentials then API Key

Continue with filling the API Key Name, any restrictions you want to apply and then press save. This will create for you an API Key that is enabled for Google Maps API

The coding part

Now we have both API Keys ready for integration, so let’s start the tutorial by opening Visual Studio Code

Create a new file and name it index.html

We will use plain html and JavaScript to do this integration.

So we don’t need any specific framework to integrate with what3words.

In fact, what3words have even made the web integration easier and faster by introducing its own component for auto-suggestion.

so you just need to include the appropriate tag and it should handle all the background work for you.

1	<what3words-autosuggest id="suggestComponent"/>

In the head section we will add 2 reference:

Google Maps JavaScript API with the API Key.

what3words JavaScript API with the API Key.

1 2	<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDmdCNH_9V6L6YvDxt3npI_Mmx3hKIR3L8"></script> <script src="https://assets.what3words.com/sdk/v3.1/what3words.js?key=TSIZPFA0"></script>

After that we need to load the map into a div element

var map = new google.maps.Map(document.getElementById('map'), {

center: {lat: 51.5005713, lng: -0.1918726},

zoom: 16,

mapTypeId: 'roadmap'

});

Finally, once the user inserts the 3 words and presses enter on the keyboard,

we will do an API call to what3words covert to coordinates API to convert the 3 words value into a (latitude,longitude) combination so we can use this combination to put a marker of the 3 words address on the map.

var markers = [];

const input = document.getElementById("suggestComponent");

input.addEventListener("select", (value) => {

what3words.api.convertToCoordinates(value.detail).then(function(response) {

if (response.coordinates) {

markers.forEach(function(marker) {

marker.setMap(null);

});

markers = [];

var latLng = {lat: response.coordinates.lat, lng: response.coordinates.lng};

var marker = new google.maps.Marker({

position: latLng,

map: map,

title: value.detail,

icon: 'marker.png' //a local marker.png file just beside the index.html file

});

markers.push(marker);

map.setCenter(latLng);

map.setZoom(18);

}

});

The full html and JavaScript page should look like the below:

<html>
   <head>
      <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
      <meta charset="utf-8">
      <title>What3words on Google Maps</title>
      <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDmdCNH_9V6L6YvDxt3npI_Mmx3hKIR3L8"></script>
      <script src="https://assets.what3words.com/sdk/v3.1/what3words.js?key=TSIZPFA0"></script>   
      <style>
         #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;
         }
      </style>
   </head>
   <body>
      <div id="wrapper">
         <div id="autosuggest">
            <what3words-autosuggest id="suggestComponent"/>
         </div>
         <div id="map"></div>
      </div>
      <script>
        
         var map = new google.maps.Map(document.getElementById('map'), {
           center: {lat: 51.5005713, lng: -0.1918726},
           zoom: 16,
           mapTypeId: 'roadmap'
         });
         
         var markers = [];
         
         const input = document.getElementById("suggestComponent");
         input.addEventListener("select", (value) => {
           
           what3words.api.convertToCoordinates(value.detail).then(function(response) {
             if (response.coordinates) {
             
               markers.forEach(function(marker) {
                 marker.setMap(null);
               });
               markers = [];
         
               var latLng = {lat: response.coordinates.lat, lng: response.coordinates.lng};
         
               var marker = new google.maps.Marker({
                 position: latLng,
                 map: map,
                 title: value.detail,
                 icon: 'marker.png' //a local marker.png file just beside the index.html file
               });
               markers.push(marker);
               map.setCenter(latLng);
               map.setZoom(20);
             }
           });    
         });
      </script>
   </body>
</html>

<html>

<head>

<title>What3words on Google Maps</title>

<style>

#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;

}

</style>

</head>

<body>

<what3words-autosuggest id="suggestComponent"/>

</div>

</div>

var map = new google.maps.Map(document.getElementById('map'), {

center: {lat: 51.5005713, lng: -0.1918726},

zoom: 16,

mapTypeId: 'roadmap'

});

var markers = [];

const input = document.getElementById("suggestComponent");

input.addEventListener("select", (value) => {

what3words.api.convertToCoordinates(value.detail).then(function(response) {

if (response.coordinates) {

markers.forEach(function(marker) {

marker.setMap(null);

});

markers = [];

var latLng = {lat: response.coordinates.lat, lng: response.coordinates.lng};

var marker = new google.maps.Marker({

position: latLng,

map: map,

title: value.detail,

icon: 'marker.png' //a local marker.png file just beside the index.html file

});

markers.push(marker);

map.setCenter(latLng);

map.setZoom(20);

}

});

</script>

</body>

</html>

Now if you run the above page on your machine, you will see Google Maps with a small text box on the upper-left side of the map displaying a what3words hint,

Browsing the page

you can use the suggestion box to search for a 3 words address which will automatically display to you suggestions once you put the 3rd dot.

Of course, the web integration is not the only way you can embed what3words into your business or product. You can integrate what3words through a huge array of frameworks and technology platforms.

You can find more details and many tutorials on what3words.com developer tutorials section.

If you are working from home and need some tips to improve your productivity,

then check my other article about 7 Tips to Improve your Remote Working Productivity

Also if you have a website or a blog and want to monetize it, Google AdSense is your solution,

But then you still need to know how to get accepted in Google AdSense.

Bonus

Enjoy this masterpiece from the baroque era by Antonio Vivaldi: Concerto for 4 Violins in B minor RV 580