heatmapapi.com Create your own heat maps using HeatMapAPI. Integrate heat map images into Google Maps or other GIS systems. Heat maps are rendered real-time.

Google Example with Javascript (Small Data Set Method)

The following is an example of how to use our API with Google Maps V2 using Javascript. This example creates 50 random points, submits with javascript then using our helper API it loads it into Google Maps. We now have an update for Google Maps V3.

You must obtain your own Google Maps license as required by Google under their terms of use. A free or paid license for HeatMapAPI doesn't include any license for Google Maps. Google Maps is not required, our API works with other GIS systems too, this is just an example.

NOTE: If you need to send more than ~50 points, you will need to use the Large Data Set Method.

Step 1 - Create a web page with Google Maps
Follow the instructions on http://code.google.com/apis/maps/, and create a basic map. I'd suggest for testing, you make your map 400x300.
Step 2 - Aquire a HeatMapAPI Key
Visit this page to get a free HeatMapAPI key. It will be sent via email to you. Please don't share keys, just simply get a new one.
Step 3 - Link Scripts
Add the following to your HTML page:
<script src="http://www.heatmapapi.com/javascript/HeatmapAPI.aspx?k=(YOUR HEATMAPAPI KEY HERE)" type="text/javascript"></script>

<script src="http://maps.google.com/maps?file=api&v=2&key=(YOUR GOOGLE KEY HERE)" type="text/javascript"></script>

<script src="http://www.heatmapapi.com/javascript/HeatmapAPIGoogle.js" type="text/javascript"></script>


Step 4 - Load Google and Init Heat Maps API
Add the following code to your HTML Page:
<script type="text/javascript">
var m = null;
function loadGoogle()
{
 if (GBrowserIsCompatible())
 {
  m = new GMap2(document.getElementById("map"));
  m.addControl(new GLargeMapControl());
  m.addControl(new GMapTypeControl());
  m.setCenter(new GLatLng(38.5, -121.8), 11);
  initHeatmap();
 }
 else
  alert('Your Internet browser is not compatible
    with this website.');
}

setTimeout('loadGoogle()', 1);

function initHeatmap()
{
 // Heatmap Scripts
 try
 {
  var myHM = new GEOHeatmap();
  myHM.Init(400, 300); // Must be same as map size, or same ratio

  var data = new Array();

  // Generate random lat/lon and value points

  for(p=0;p<50;p++)
  {
   var rLatD=Math.floor(Math.random()*1000);
   var rLonD=Math.floor(Math.random()*1000);
   var rValD=Math.floor(Math.random()*10);
   data.push(38.47+(rLatD/15000));
   data.push(-121.84+(rLonD/15000));
   data.push(rValD);
  }

  myHM.SetData(data);
  myHM.SetBoost(1); // Optional, see documentation
  myHM.SetDecay(0); // Optional, see documentation
  var preUrl = myHM.GetURL();

  // Now render in our Google Map
  var heatmapOverlay = new HMGoogleOverlay(preUrl);
  m.addOverlay(heatmapOverlay);
 }
 catch(e)
 {
  alert(e.Message);
 }
}
</script>
The Example:



Copyright 2008-2012, HeatMapAPI.com