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>
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>
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>
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.
|