Add the following to your HTML page, note that the Large Data Set Method, uses different script files:
<script src="http://www.heatmapapi.com/javascript/HeatmapAPI2.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/HeatmapAPIGoogle2.js" type="text/javascript"></script>
You'll need to add the following hidden form fields on your 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(39.03, -103.96), 12);
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);
// Generate random lat/lon and value points
var d= "";
for(p=0;p<1000;p++)
{
var rLatD=Math.floor(Math.random()*1000);
var rLonD=Math.floor(Math.random()*1000);
var rValD=Math.floor(Math.random()*10);
var sVal = (39+(rLatD/15000)) + "," +
(-104+(rLonD/15000)) + "," +
(rValD) + ",";
d += sVal;
}
document.getElementById("HMMapdata").value = d;
myHM.SetBoost(2); // Optional, make it 'smoother n bigger'
myHM.SetDecay(0); // Optional, slow growth for adjacency
//NOTE YOU NEED TO CREATE YOUR OWN PROXY PAGE
//See the documentation under web services for an example
var proxyURL = 'http://yourwebsite.com/YourProxy.aspx';
myHM.SetProxyURL(proxyURL);
// Optional
// for cross-domain
var preUrl = myHM.GetURL();
// Now render in our Google Map
var heatmapOverlay = new HMGoogleOverlay(preUrl);
m.addOverlay(heatmapOverlay);
}
catch(e)
{
alert(e.Message);
}
}