Interactive Heatmaps with Google Maps API v3

indiaThanks to the Google Maps API it is pretty easy to code up a small JavaScript to turn a bunch of points into an interactively explorable and lovely looking heatmap. You’re welcome to give it a try on where you can load a CSV to display its contained points. The CSV is supposed to be semicolon delimited and contain at least two columns “lat” and “lon” for the geographical location and an optional third numerical column “weight”. The order does not matter. And of course the parsing is done with Papa Parse – what else!

The Technicalities

This would be for example the beginning of population.csv:

In the app you can get an idea how the visualities of a heatmap layer may be tweaked:

  • Opacity, to influence how much you see of the map
  • Radius determines how large hot spots get and when they merge
  • The max value sets the upper limit of the interval mapped on the color gradient

europeDon’t hesitate to check out its code and Google’s examples and documentation to get an idea about the inner workings:

You might also for example define a custom color gradient in case green to yellow to red doesn’t do it for you. Just mind that the rgb-value of the first color needs an alpha-level of 0 (fully transparent) – otherwise the whole world will be colored.

A Boiled Down Version of Google’s Taxi Data Example

The code below is just what you will find here – but stripped to its essentials, a few comments and featuring just a single data point.

 Visualizing Global Population Densities


The data for the heatmap visualizing the populations of almost 48’000 cities around the world is based on the Free World Cities Database provided by MaxMind. The CSV contains more than 3’000’000 rows and 7 columns but only those 48’000 records provide a population number. The following few lines of R code will turn their CSV into something you can load at

 But you may also simply download the file population.csv from here.

stay-tuned twitter feedly github

How Much Is Too Much?

In case you are wondering – with Google heatmaps you are able to render a million data points and more. It’s going to give your browser a hard time zooming and occasional freezing won’t be avoidable – but it is possible. I think that is quite amazing!

(original article published on

6 thoughts on “Interactive Heatmaps with Google Maps API v3

  1. Dear Raffael,

    Thank you for this nice and user friendly visualization.

    I have one question please, What is the way to get the data from a remote source rather than a local one. I could not figure this out.

    We have a url that once opened automatically downloads a csv file.

    Many thanks,


  2. Hey Raffael, This is wonderful. Works beautifully.

    Is there a way to download these maps in some form? I wish to use this in a powerpoint presentation.


  3. Hello Raffael,

    beautiful your maps, I’m interested in the heat map of google, I’m trying to use them, but I can not figure out how to bring up the scale of the heat map.

    Thank You

    • Thanks and good point. The colour scale is not explicitly specified as far as I know. You could provide the density values of some locations to allow for absolute interpretation.

Leave a Reply

Your email address will not be published. Required fields are marked *