Google Maps Drive Time Polygon Tutorial: How to Create a Driving Radius

If you’ve ever wondered how far you can drive with a certain amount of time, a drive time polygon map is a great way to visualise this.

This tutorial will show you how to create a drive time polygon on a map using Google Maps and the TravelTime API. There is no Google Map Polygon API, but TravelTime can work with any third party mapping provider. The TravelTime API creates 1,000 free shapes per month – signup here.

These drive time polygons are also known as an isochrones. They show the areas you can travel to within a time limit. The Isochrone API works with any transport mode, not just driving, so you can follow along to create a walking, cycling or public transport polygon too.

Prerequisites 

To follow along with the tutorial, you’ll need the following:

• The TravelTime API. If you’re new to TravelTime, you can sign up for a free API key here.
• The Google Maps JavaScript API. Note that for this to work, you’ll need to set up an account in Google’s Cloud Console and ensure that your API key is enabled.

How to build a drive time map without code 

This tutorial is intended for developers who want to implement a travel time polygon in on their projects. The polygon we are going to create will show us all the reachable areas within a 15 minute travel time from the Waterloo Train Station in London using various transporation types.

If you don’t want to code but still want to create a travel time map, you can use our free TravelTime app. In a few clicks, you can create a travel time map for driving and other transport modes.

Step 1 – Set up your map

The first step is to set up your map to display London Waterloo Train Station and put a marker on it. For this, you’ll need the Google Maps JavaScript API. 

To have a full-sized map on a page, you’ll need to add some styles to the code. In this case, we’ll use an .html file.

First, add the following elements to the body:

1. A div tag with id of ‘map’;
2. A script for Google Maps API: here, enter your API key;
3. A script to handle theinitMap()function. This will be used to initialise the map on the screen. In themapOptsvariable you can set the centre position of the map, the zoom level that will be shown by default.

Once you’ve added these elements, you can now create the map and have a marker positioned at the specified coordinates.

Step 2 – Draw the driving radius in Google Maps

Now to draw the polygon on a Google Map using Javascript. You can use data from the TravelTime API. By signing up for a free API keyyou can draw 1,000 free drive time polygons each month.

To do this, you’ll need to add a couple of items to the initMap()function. 

First, you 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 the search.

Then you’ll need to add the sendGeocodingRequest function. This will send a request to the TravelTime API and allow a polygon to be drawn.

In the second script, add the following setting variables:

• 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– this indicates the travel time in seconds
• APPLICATION_ID– application won't work without correct authorisation
• API_KEY– the application won't work without correct authorisation

After you’ve defined the variables, you can add functions for communicating with the TravelTime API.

The sendGeocodingRequest function will send a query to the TravelTime API. This will get coordinates of the location written in the ‘location’ variable and call the sendTimeMapRequest function.

The sendTimeMapFunction function will convert parameters into a JSON format and send a POST request to the TravelTime API.

In this function, use the latitude and longitude that was geocoded in the previous step. Here, you can also define the parameters of the polygon. For example, you can change the “public_transport” type to “driving” or any other transport mode.

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. And there you have it - a Google Maps Javascript API polygon!

The full Google Maps API polygon example code can be found here.

Step 3 – Visualising where you can drive within a time limit

Following the steps above, you can create a set of different travel time polygons. Here are a few examples, using different transport modes:

15-minute public transport travel time polygon

15-minute drive time polygon

15-minute cycling travel time polygon

15-minute walking travel time polygon

‍Step 4 - Calculate the total area of a Google Maps polygon

The most simple and fast-forward way of calculating Google Maps polygon's total area is by using the Geometry library. While extending the full Google Maps API polygon example code above, this can be done in two steps:

1. Specify the library in the bootstrap URL for the Maps JavaScript API
2. Calculate the area size using the built-in library method

To summarize the purpose of the code snippet above, it can be said that firstly, we are creating a polygon showing all the locations that are reachable within a 15 minute travel time using public transport from the Waterloo Train Station in London. We assume the user is departing at 12 PM GMT. Afterwards, using Google's built-in library, we calculate the total area, which in this case sums to 2735418.9 m².

Step 5 - Check if a points falls inside polygon

Do you want to filter a list of points to see which ones fall within your catchment area? You can use TravelTime to check if point falls inside Google Maps polygon. The point in polygon functionality is done using the TravelTime Distance Matrix API, which can first filter which points are reachable and unreachable, and then calculate the individual times and distances to all reachable points. Skip to the Javascript section in this tutorial.

What else can I do with the TravelTime API?

Creating a single drive time map is only the tip of the iceberg when it comes to what you can do with the TravelTime API.

Here are three ideas of what else you can do with doing slight modifications to the base code that we already went through:

1. Create a heat map using different travel times

You can create visualisations representing incremental increases in your travel time radius. 

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

Check out the full code example for creating this visualisation here.

2. Find common areas between several travel times

You may want to find common areas between a few drive time radiuses. With the TravelTime API you can overlap multiple polygons and highlight the overlapping area on a map.

The example below 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.

You can find the full code for this visualisation here.

3. Create unions of multiple travel time polygons

If you want to make a larger visualisation, you may be interested in making unions of many travel time shapes 

The New York Timesused this technique to analyse the whole of the US and see which parts of the country 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 sections show all locations more than 30 minutes away from an emergency room.

Next steps

Now that you’ve built a drive time map, why not try creating travel time polygons for other transport modes?

With the TravelTime API, you can build travel time polygons for any mode of transport, including public transport, cycling and walking. There are many ways to use thisin your applications, including showing house hunters where they can live within a specific commute time to work.

Check out our documentationto learn more about what you can do with the TravelTime API or sign up for a free API key.