Adding the traffic layer

In today's world, the condition of traffic is very important information in cities. If there is an accident on the way or a recent construction that blocks an important street, it affects your whole day. How useful would it be to have real-time traffic information directly on your maps?

The Google Maps JavaScript API has a very handy aspect that lets you have traffic information fed on a real-time basis on top of your base maps.

In this recipe, we will cover how to display traffic information on your Google Maps.

Getting ready

We can use the first recipe of Chapter 1, Google Maps JavaScript API Basics, as a base for the basic map display. After copying the code of the original recipe, you can proceed forward.

How to do it…

Here are the steps to show the traffic layer:

1. Firstly, change the center of your map to a location where the traffic layer is served (details will be available in the How it works... section). For instance, for Barcelona, Spain, use the following values...