Density map tutorial—Prototype, Google Maps API and the HeatMapAPI

I created a tutorial that will step one through how to create a density map with Prototype, the Google Maps API and the HeatMapAPI. The final product, a density map of liquor licenses in Milwaukee, WI, is below. While this map is based on real data, one limitation of the free HeatMapAPI is that only 100 data points can be submitted per call. Since there are approximately 1,300 liquor licenses in Milwaukee, this map isn't even close to accurate!

Creating a map like this takes four simple steps:

  1. Getting everything ready
  2. Create the Google map
  3. Add the data
  4. Create the density map

To step one!

19 thoughts on “Density map tutorial—Prototype, Google Maps API and the HeatMapAPI

  1. Sorry about that, Chiatt—you're right, it's not rendering in IE. Even though I was sending just under the maximum 100 points, for some reason the URL was truncating (and therefore becoming malformed) in IE 6 and 7. It's been resolved now.


  2. Pingback: Weekend Links - Google Maps API, HeatMap API, googleDrive, MooTools Forms, jQuery Sparklines, Firebug

  3. Hi,

    I came across your HeatMapAPI sample while I was attempting to implement a HeatMapAPI project of my own.

    You got further along than I did, so I thought I might ask for your help.

    I attempted to implement their sample on my site as a first step. Alas, the Google map renders perfectly, but the Heat Map does not. Do you have any ideas as to what is going on?

    I have attempted to contact the folks at HeatMap, but have not received a reply to my query.

    The URL is:

    Thank you in advance.

  4. Hello, Carey,

    I followed the link in your comment, but only got an IIS error page. What's happening with your site?

    How long ago did you contact the folks at Geospatial Analytics Inc? The reason I ask is that I contacted them with a question while doing my demo/tutorial and, though the initial contact took a bit, were quite responsive after that.


  5. Hi Jeffrey,

    Yes, they eventually got back to me. There were some bugs that they very patiently fixed. I like their API, although I think the documentation is a tad scant. I never did get the school of thought that said the code speaks for itself.

    Your demo went a long way towards getting a working demo up and running.


  6. Hello gpuri,

    Regarding your first comment, I initially thought you were talking about my demo, which is working fine in Firefox 3 and IE 8 (the only browsers I have access to on this machine).

    Based on your second comment, I see you're talking about your site, which, as you say, is not working in FF. I'm kind of surprised it's working in IE because IE throws the same error.

    However, I'm not sure why the error is occurring in the first place nor why it works in IE. I might be able to figure it out, but I'd have to step through all of your code to do so and unfortunately I don't have the time to do that right now.


  7. Pingback: xorprime » Blog Archive » Bushfire density map prototype

  8. Hello Jeffrey,

    I was making a reseach about Density maps APIs and I could just find HeatMaps API.

    Do you know another alternative to this API?



  9. Thanks for mentioning our new(ish) heatmap service. This utility is slightly different than some, in that it is software-as-a-web-service. You send it your raw data and it generates the google map commands in your browser to do the overlay. The data is sent by HTTP POST mechanism. We have example code for driving it from JavaScript and PHP, and a manual. You can also just paste your data into the example page and generate overlay maps on the fly.

  10. Thanks much for the tutorial. One note to future tut followers. The heatmap script tags need to be included below the main script file. I included the script files in the and that didn’t work

Leave a Reply