Heat map visualization for discrete values on Google Maps

Question

I'm working on the following scenario: I have a geographical location and I need to create a heat-map visualization of travel times (by car) from that location to anywhere around. I'm planning on using Google Distance Matrix API for getting travel duration. But, since it has a limit on the no of API calls, I need to somehow limit the calls.

My plan, so far, is the following: compute the travel duration (basically a numeric value) to a set of points evenly distributed on a grid around the given position (eg 0.5km east, 0.5 km east-0.5km north, 0.5 km east-1 km north etc.). This points would represent the centers of square-shaped areas and I will consider the travel duration to the center as the travel duration to anywhere in the area. Display these areas as colored squares on a Google Maps in a heatmap style.

A good example of something that looks alike is this: http://project.wnyc.org/transit-time/#40.72280,-73.95464,12,709 .

So, my questions are:

1. Does it seem like a good strategy?
2. Is there a better visualisation strategy for something like this?
3. How can I create those square-shaped colored areas on Google Maps?

Thanks!

Answer 1

Calculating duration would surely involve traffic flow rather than simply distance. If your calculations are purely on distance you could use the Google Maps direction requests to calculate the distance to each point.

1. I'm not sure a heat map is the way forward for this scenario.

2. There a number of way you could achieve this. Here's a few:

   a. Use a custom overlay ( https://developers.google.com/maps/documentation/javascript/examples/overlay-simple )

   b. Draw polygons on the map and give them different colours based on the journey duration. This would involve taking the area in question and slicing it up in to polygons however you need to. These polygons could take the same shape as your example. You would need to be rather precise with your latlng. SQL's spacial querys would help you here depending on the tech your using. ( https://developers.google.com/maps/documentation/javascript/examples/polygon-arrays )

   c. Depending on how specific you wanted to be you could draw circles with different radius value and different colours.

   d. You could make custom markers in the shapes you require and add them to the map in the correct latlng in order to fill an area. You could have different markers for different duration and add them accordingly.

I'm sure there are other options as well.