1 <apex:page showHeader="false" sidebar="false"> 2 <script src="http://www.heatmapapi.com/javascript/HeatmapAPI.aspx?k=86123b76-2190-4a4b-b182-86e7199b0406" type="text/javascript"></script> 3 4 <script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA09SA9e7gW5A4Mpy3VCJQjxQfiV3Wc4AiuMkI_RwI0dk2dVyy7hQWusr2PE1VCubWNkTco2njprfSxg" type="text/javascript"></script> 5 6 <script src="http://www.heatmapapi.com/javascript/HeatmapAPIGoogle.js" type="text/javascript"></script> 7 <script type="text/javascript" 8 src="http://maps.google.com/maps/api/js?sensor=false"> 9 </script> 10 <script type="text/javascript"> 11 var m = null; 12 var batch = ""; 13 var myHM = null; 14 var request = GXmlHttp.create(); 15 var TOTAL_COUNT = 0; 16 var INDEX = 0; 17 function loadGoogle() 18 { 19 if (GBrowserIsCompatible()) 20 { 21 m = new GMap2(document.getElementById("map")); 22 m.setCenter(new GLatLng(38.5, -95.8), 3); 23 m.setUIToDefault(); 24 initHeatmap(); 25 } 26 else 27 alert('Your Internet browser is not compatible with this website.'); 28 } 29 30 31 32 function initHeatmap() 33 { 34 // Heatmap Scripts 35 try 36 { 37 myHM = new GEOHeatmap(); 38 myHM.Init(400, 400); // Must be same as map size, or same ratio 39 addMarkersFromXml(); 40 41 42 43 44 45 } 46 catch(e) 47 { 48 alert(e); 49 } 50 } 51 52 function addMarkersFromXml(){ 53 54 request.open('GET', '/apex/data', true); 55 request.onreadystatechange = function() { 56 //alert(request.readyState); 57 if(request.readyState == 4) { 58 var xmlDoc = request.responseXML; 59 var markers = xmlDoc.documentElement.getElementsByTagName("store"); 60 TOTAL_COUNT = markers.length; 61 INDEX = 0; 62 for(var i=0; i < markers.length; i++){ 63 var state = markers[i].getAttribute("state"); 64 var density = "1";//markers[i].getAttribute("density"); 65 geocoder = new GClientGeocoder(); 66 var address = state; 67 geocoder.getLatLng(address, 68 function(point) { 69 if (!point) { 70 71 } else { 72 fullVal = point.lat().toFixed(5) + "," + point.lng().toFixed(5) + "," + density + ","; 73 batch += fullVal; 74 INDEX++; 75 if(INDEX >= TOTAL_COUNT){ 76 startMap(); 77 } 78 } 79 }); 80 } 81 82 } 83 } 84 85 86 function startMap(){ 87 document.getElementById("HMMapdata").value=batch; 88 myHM.SetData(batch); 89 myHM.SetBoost(.5); // Optional, see documentation 90 myHM.SetDecay(0); // Optional, see documentation 91 //var proxyURL = "http://localhost/proxy.php"; 92 //myHM.SetProxyURL(proxyURL); 93 var preUrl = myHM.GetURL(); 94 95 // Now render in our Google Map 96 var heatmapOverlay = new HMGoogleOverlay(preUrl); 97 m.addOverlay(heatmapOverlay); 98 } 99 request.send(null); 100 101 } 102 103 104 105 106 107 </script> 108 109 <apex:sectionHeader subtitle="Heat Map using Google Map" title="Aslam Bari (http://www.aslambari.com)"/> 110 <body onload="loadGoogle();"> 111 <input type="hidden" id="HMMapdata" /> 112 <input type="hidden" id="HMImageURL" name="HMImageURL"/> 113 <div id="map" style="width:400px;height:400px;"></div> 114 </body> 115 </apex:page>