Featured image

Google Maps Drive Time Polygon Tutorial: A Guide to Driving Radius

by Evelina Bezubec on Sep 11, 2020

Show driving radius Google Maps

In this tutorial, we’re going to show you how to draw a driving radius on an embedded Google Map on a website. To achieve this we will use data from Google Maps and the TravelTime APIs.

The word ‘radius’ suggests that we will be showing a circular shape on a map, however, this type of driving radius may exist only in a perfectly flat world with no twisty roads or terrain to go around. Only then could we have a circular ‘as the crow flies’ travel time shape.

We will be drawing a shape that resembles the real world and it will show which locations can be reached from a point in a given time frame. This shape is called an isochrone and it shows points of an equal value joined together. 

How to build if you don’t use code

This tutorial is intended for developers interested in implementing a radius travel time on their projects. If you’re not a developer but still want to create a travel time map, use our ready to go tool by clicking below.

Click

google maps travel radiusImage shows an example using the code-free tool. 

This tool is a demonstration of the basic capabilities of TravelTime API, in a few clicks you can create a travel time map using five different transportation modes. 

Travel time map Google edition

Google does not own an API that can create polygons so we use TravelTime to show you how to draw a driving radius on Google Maps. The very first thing we need to get started is a Google Maps API key. If you don’t have one yet, you will need to go to Google Cloud Platform Console and set one up. If you are not sure how to get an API key, Google has a guide you can follow. The name of the API that you need is “Maps JavaScript API”

After setting up the new API key, make sure you have enabled the key – otherwise your map will not work. If you're facing this problem, there's a guide you can try on how to enable an API key.

Cost effective Google Maps alternative

TravelTime offers map tiles completely free when using other paid services. Reduce your map services costs. Explore TravelTime tiles.

Setting up the Google Maps driving distance calculator

In this example, we will be setting up our map to display London Waterloo Train Station and put a marker on it. So let’s begin to create our Google Maps drive time polygon.

To have a full sized map on a page, we need to add some styles to the code, in this case an .html file.

First, we add a few elements to the body:
  • a div tag with id of ‘map’;
  • a script for Google Maps API, this is where you’ll insert your API key;
  • a script to handle initMap() function which will be used to initialise the map on the screen. In the mapOpts variable we set the centre position of the map, the zoom level that will be shown by default.
With these elements added, we will create our map and have a marker positioned at our specified coordinates.

Drawing the driving radius in Google Maps

Now that we have done the initial setup, let’s add TravelTime data and draw a Google map isochrone by drive time.

First, you will need a TravelTime API key, you can get a key here, if you don’t have one. Once you setup we should add some more code to handle the creation of the travel time shape and communication with TravelTime API.

We need to add a couple of items to the initMap() function. First we need a polygon handling method for getting the bounds of the isochrone, this will allow you to zoom to the drawn polygon shape when it’s received after search. Then we need to add sendGeocodingRequest function which will try TravelTime data and if everything is alright, a polygon will be drawn.

Then in the second script, we need to have setting variables inserted:

  • startingLocation - a string that will be geocoded as the starting point;
  • departureTime - this variable adds function to use the current date, but it can be changed;
  • travelTime - travel time in seconds;
  • APPLICATION_ID - application won't work without correct authorisation;
  • API_KEY - application won't work without correct authorisation.

After we have the variables defined, we add functions for communicating with the TravelTime API and managing the polygon data that we will receive.

sendGeocodingRequest function will send a query to the free TravelTime Geocoder, this will get coordinates of the location written in the ‘location’ variable. If the function does its job, it will call the sendTimeMapRequest function.

sendTimeMapFunction function will bundle up parameters into JSON format and send a POST request to the TravelTime /time-map endpoint. In this function, we use the latitude and longitude that was geocoded in the previous step. The parameters of the driving radius needed are also defined here, for example, you can change the “public_transport” type to “driving” and other transportation types supported by the API.

The final function in the script is drawTimeMap, this function handles drawing of the polygons received from TravelTime API. In the polygon variable of this function you can make changes to the colours, opacity, border width of the drive time radius shape.

The full example of the code explained in this blog post can be found here.

We have an additional tutorial explaining how to draw a driving radius using Leaflet JavaScript library if you wish to use another map provider. TravelTime supports more map tile providers if you don’t want to use Google Maps as in this tutorial.

Visualising ‘how far can i travel’ within a time limit

Google Maps travel time radius using public transport data: 15 minute radius

google map isochrone

Map data ©2019 Google

Google Maps travel radius using drive times: 15 minute radius

google maps drive time polygon

Map data ©2019 Google

Google Maps cycling distance radius: 15 minute radius

travel time radius map google

Map data ©2019 Google

Google Maps walking distance radius: 15 minute radius

google maps walking distance radius

Map data ©2019 Google

Travel time radius map Google ideas

Creating a single drive time radius on a map is only the beginning of what you can do with the TravelTime API time map endpoint. Here are three ideas of what else you can do with doing slight modifications to the base code that we already went through:

Create a heat map using various travel times

Just by sending additional requests to the API from the same starting point you can create visualisations representing incremental increases in your travel time radius. Full code example for creating this visualisation is available here.

The example compares where's reachable within 10 minutes, 20 minutes, 30 minutes, 40 minutes using public transport. The layering of the shapes gives the appearance of a travel time heat map.

travel time map google

Map data ©2019 Google

Create an intersection

You may want to find common areas between a few drive time radiuses. Overlap multiple polygons and highlight the overlapping area on a Google map.

Example shows an intersection of two shapes. One shape shows 30 minutes of reachable area from London Waterloo Station and the other shape shows 30 minutes of reachable area from Canary Wharf, both using public transport. The purple shows where both shapes overlap.

show driving radius google maps

Map data ©2019 Google

Full code can be found here.

Create unions of all shapes

If you want to make a large visualisation or analyse a hypothesis over large areas, you may be interested in making unions of many travel time shapes. After receiving large amounts of polygon data you can process it to make one large shape, group them together in a variety of ways.

The New York Times analysed the whole of the USA to see which parts of America have limited access to emergency rooms during the COVID-19 pandemic. The visualisation below was created by sending thousands of requests to TravelTime API and later processed to create a large scale map. The orange pinpoints all locations more than 30 minutes away from an emergency room. 

driving-radiusReference: The New York Times

Get your TravelTime API key and start creating your own driving radius map. 

Click

Topics:
Radius maps Tutorials