Thread: Creating a google map with markers and an option to change to heatmap

I have created a map using google map api v3. Currently what i have managed to achieved is to plot the location with a marker; that is parsed out from a json file.

Ultimately i am trying to add an option of switching to HeatMap view. Just like [

HTML Code:

https://google-developers.appspot.com/maps/documentation/javascript/examples/full/layer-heatmap

]
I have viewed the source code and attempted to replicate the Heatmap toggle codes into my existing code by copying the relevant portion out but it was not very successful.

I am wondering if anyone here could point me in the right direction or point out my mistakes.

- Would appericate any form of help. Cheers

**I have added commenting. Hopefully that would make reading the code a lot easier.

var map, pointArray, heatmap;
              var infowindow = new google.maps.InfoWindow({});
 
              //createMarker function
              function createMarker(latLng, title, content) {
              var marker = new google.maps.Marker({
              position: latLng,
              map: map,
              title: title
            });
 
            //Onclick listener(mouseover)
            google.maps.event.addListener(marker, "click", function() {
                infowindow.setContent(content);
                infowindow.open(map, marker);
            });}
 
            //toggleHeatmap function
            function toggleHeatmap() {heatmap.setMap(heatmap.getMap() ? null : map);}
 
            // initialization function (focus location ,map type and zoom level)
            function initialize() {
            var mapOptions = {
            zoom: 5,
            center: new google.maps.LatLng(-27.48939, 153.012772),
            mapTypeId: google.maps.MapTypeId.ROADMAP 
          };
          map = new google.maps.Map(document.getElementById('map_canvas'),
              mapOptions);
 
          //reading location file
          var script = document.createElement('script');
          script.src = '\week.json';
          document.getElementsByTagName('head')[0].appendChild(script);
 
    	   //creating heatmap
    		 var pointArray = new google.maps.MVCArray(latLng);
 
    			heatmap = new google.maps.visualization.HeatmapLayer({
    			data: pointArray
    			});
    		 heatmap.setMap(map);
        }
 
    	//window will load this at start
    	window.eqfeed_callback = function(results) {
          var bounds=new google.maps.LatLngBounds();
          for (var i = 0; i < results.features.length; i++) {
 
            var wifin = results.features[i]; 
            var coords = wifin.geometry.coordinates; 
 
            var latLng = new google.maps.LatLng(coords[0],coords[1]); 
            bounds.extend(latLng);
 
            var content ="<div style='height:100px; width:300px; overflow:auto;'><table>";
            content += "<tr><th align='left'>WifiMacAddress</th><td>"+wifin.properties.WifiMacAddress+"</td></tr>";
            content += "<tr><th align='left'>SSID</th><td>"+wifin.properties.SSID+"</td></tr>";
            content += "<tr><th align='left'>SignalStrength</th><td>"+wifin.properties.SignalStrength+"</td></tr>";
            content += "<tr><th align='left'>WifiFrequency</th><td>"+wifin.properties.WifiFrequency+"</td></tr>";
            content +="</table>";
            createMarker(latLng,wifin.WifiMacAddress,content);
          }
          map.fitBounds(bounds);
        }
 
 
          </script>
 
 
For the invoking part, i did exactly the same as what the sample map showed.
 
 
 
    <button onclick="toggleHeatmap()">Toggle Heatmap</button>

[1]: https://google-developers.appspot.co.../layer-heatmap

Wrong forum pal. Java is not in any way related to JavaScript, contrary to the name.

No need to remove, even if you could but it is the wrong forum for you to get results in less than 2 weeks
Stackoverflow would be the right place for this sort of question.