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 Maps Example with Javascript

The following is an example of how to use our API with Google Maps version 3 using Javascript (if you are using Google Maps v2 I would suggest upgrading that version is no longer supported by Google). This example creates 50 random points, submits with javascript then using our helper API it loads it into Google Maps.

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.

NOTE: With this update, you no longer need to have a different library for small or large datasets, this version gives you both as an option.

Step 1 - Create a web page with Google Maps
Follow the instructions on http://code.google.com/apis/maps/documentation/javascript/, and create a basic map. I'd suggest for testing, you make your map 400x300.
Step 2 - Get 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 3a - Link Scripts
Add the following 2 scripts to your HTML page, after your google script link:
<script type="text/javascript" src="http://www.heatmapapi.com/Javascript/HeatmapAPIGoogle3.js"></script>
<script type="text/javascript" src="http://www.heatmapapi.com/Javascript/HeatMapAPI3.aspx?k=YOUR KEY FROM STEP 2"></script>
Step 3b - Use JQuery
If your not already linking in jQuery, you'll need to do that:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
Step 4 - Your Javascript
Add the following code to your HTML Page, this assumes you have a google map working with a div tag with id="map":
<script type="text/javascript">
var myHeatmap = new GEOHeatmap();
var myData = null;
$(function() {
// create data
myData = new Array();
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);

 myData.push(38.47 + (rLatD / 15000));
 myData.push(-121.84 + (rLonD / 15000));
 myData.push(rValD);
}

// configure HeatMapAPI
myHeatmap.Init(400, 300); // set at pixels for your map
myHeatmap.SetBoost(0.8);
myHeatmap.SetDecay(0); // see documentation
myHeatmap.SetData(myData);
myHeatmap.SetProxyURL('http://www.yourwebsite.com/proxy.php');

// set up Google map, pass in the heatmap function
var myLatlng = new google.maps.LatLng(38.5, -121.8);
var myOptions = {
 zoom: 11,
 center: myLatlng,
 mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map"), myOptions);
google.maps.event.addListener(map, 'idle', function(event) {
 myHeatmap.AddOverlay(this, myHeatmap);
});
});
</script>
Step 5 - Implement Proxy Page
You will have to implement a proxy page too.
See the proxy page examples on the documentation page per whatever file name you use above in step 4 as SetProxyURL();. Your proxy page must be on the same domain name.
The Example:



Copyright 2008-2012, HeatMapAPI.com