title: Toggle markers - Google API V3 - Heatmap
body: <p>I've made one map based on this nice topic: <a href="https://stackoverflow.com/questions/24327838/toggle-markers-in-google-maps/24328977#24328977">Toggle Markers in Google Maps</a>. It is a heatpmap with pins indicating places.</p>
  
  <p><strong>I cannot, however, toggle the pins i've added and keep the heatmap layer.</strong> </p>
  
  <p>I've only added some of the pins (and heatmap data points) here, in order to keep it short, and once I add them all it gets very hard to visualize the heatmap itself - that's why I need a button to toggle them.
  I searched a lot on stackoverflow, but I'm a beginner on coding and running out of time.</p>
  
  <p><strong>CODE</strong></p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Sao Paulo&lt;/title&gt;
      &lt;style&gt;
        html, body, #map-canvas {
          height: 100%;
          margin: 0px;
          padding: 0px
        }
        #panel {
          position: absolute;
          top: 5px;
          left: 50%;
          margin-left: -180px;
          z-index: 5;
          background-color: #fff;
          padding: 5px;
          border: 1px solid #999;
        }
      &lt;/style&gt;
      &lt;script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;libraries=visualization"&gt;&lt;/script&gt;
      &lt;script&gt;    
  
  
  
  
  // Adding Data Points
  
  
  var map, pointarray, heatmap;
  
  var taxiData = [new google.maps.LatLng(-23.672783, -46.664681),
  new google.maps.LatLng(-23.672783, -46.664681),
  new google.maps.LatLng(-23.672783, -46.664681),
  new google.maps.LatLng(-23.672783, -46.664681),
  new google.maps.LatLng(-23.672783, -46.664681),
  new google.maps.LatLng(-23.532816, -46.565873),
  new google.maps.LatLng(-23.532816, -46.565873),
  new google.maps.LatLng(-23.532816, -46.565873),
  new google.maps.LatLng(-23.532816, -46.565873),
  new google.maps.LatLng(-23.532816, -46.565873),
  new google.maps.LatLng(-23.532816, -46.565873),
  new google.maps.LatLng(-23.532816, -46.565873),
  new google.maps.LatLng(-23.532816, -46.565873),
  new google.maps.LatLng(-23.532816, -46.565873),
  new google.maps.LatLng(-23.531575, -46.651898),
  new google.maps.LatLng(-23.531575, -46.651898),
  new google.maps.LatLng(-23.526200, -46.550021),
  new google.maps.LatLng(-23.714602, -46.687124),
  new google.maps.LatLng(-23.714602, -46.687124),
  new google.maps.LatLng(-23.714602, -46.687124),
  new google.maps.LatLng(-23.714602, -46.687124),
  new google.maps.LatLng(-23.714602, -46.687124),
  new google.maps.LatLng(-23.599363, -46.539564),
  new google.maps.LatLng(-23.599363, -46.539564),
  new google.maps.LatLng(-23.599363, -46.539564),
  new google.maps.LatLng(-23.648271, -46.748602),
  new google.maps.LatLng(-23.648271, -46.748602),
  new google.maps.LatLng(-23.648271, -46.748602),
  new google.maps.LatLng(-23.648271, -46.748602),
  new google.maps.LatLng(-23.743565, -46.704938),
  new google.maps.LatLng(-23.753251, -46.670598),
  new google.maps.LatLng(-23.753251, -46.670598),
  new google.maps.LatLng(-23.753251, -46.670598),
  new google.maps.LatLng(-23.538945, -46.454974),
  new google.maps.LatLng(-23.538945, -46.454974),
  new google.maps.LatLng(-23.538945, -46.454974),
  new google.maps.LatLng(-23.538945, -46.454974),
  new google.maps.LatLng(-23.538945, -46.454974),
  new google.maps.LatLng(-23.502081, -46.449464),
  new google.maps.LatLng(-23.502081, -46.449464),
  new google.maps.LatLng(-23.502852, -46.631123),
  new google.maps.LatLng(-23.502852, -46.631123),
  new google.maps.LatLng(-23.550412, -46.597303),
  new google.maps.LatLng(-23.550412, -46.597303),
  new google.maps.LatLng(-23.550412, -46.597303),
  new google.maps.LatLng(-23.616210, -46.495470),
  new google.maps.LatLng(-23.616210, -46.495470),
  new google.maps.LatLng(-23.476226, -46.703023),
  new google.maps.LatLng(-23.530669, -46.444300),
  new google.maps.LatLng(-23.492830, -46.600559),
  new google.maps.LatLng(-23.492830, -46.600559),
  new google.maps.LatLng(-23.492830, -46.600559),
  new google.maps.LatLng(-23.722254, -46.704621),
  new google.maps.LatLng(-23.594344, -46.751259),
  new google.maps.LatLng(-23.594344, -46.751259),
  new google.maps.LatLng(-23.594344, -46.751259),
  new google.maps.LatLng(-23.594344, -46.751259),
  new google.maps.LatLng(-23.526226, -46.417361),
  new google.maps.LatLng(-23.526226, -46.417361),
  new google.maps.LatLng(-23.526226, -46.417361),
  new google.maps.LatLng(-23.521684, -46.561784),
  new google.maps.LatLng(-23.521684, -46.561784),
  new google.maps.LatLng(-23.521684, -46.561784),
  new google.maps.LatLng(-23.521684, -46.561784),
  new google.maps.LatLng(-23.521684, -46.561784),
  new google.maps.LatLng(-23.499804, -46.516773),
  new google.maps.LatLng(-23.646948, -46.701438),
  new google.maps.LatLng(-23.523667, -46.700788),
  new google.maps.LatLng(-23.529025, -46.529134),
  new google.maps.LatLng(-23.529025, -46.529134),
  new google.maps.LatLng(-23.529025, -46.529134),
  new google.maps.LatLng(-23.548776, -46.560548),
  new google.maps.LatLng(-23.548776, -46.560548),
  new google.maps.LatLng(-23.548776, -46.560548),
  new google.maps.LatLng(-23.501684, -46.493347),
  new google.maps.LatLng(-23.501684, -46.493347),
  new google.maps.LatLng(-23.652993, -46.645012),
  
  
  
  ];
  
  function initialize() {
    var mapOptions = {
      zoom: 11,
      center: new google.maps.LatLng(-23.5934217, -46.6627102),
      mapTypeId: google.maps.MapTypeId.SATELLITE
    };
  
    map = new google.maps.Map(document.getElementById('map-canvas'),
        mapOptions);
  
    var pointArray = new google.maps.MVCArray(taxiData);
  
    heatmap = new google.maps.visualization.HeatmapLayer({
      data: pointArray
    });
  
    heatmap.setMap(map);
  
    var locations = [
  ['1',-23.664681, -46.664681],
  ['2',-23.565873, -46.565873],
  ['3',-23.651898, -46.651898],
  ['4',-23.383921, -46.383921],
  ['5',-23.550021, -46.550021],
  ['6',-23.687124, -46.687124],
  ['7',-23.638630, -46.638630],
  ['8',-23.379916, -46.379916],
  ['9',-23.575142, -46.575142],
  ['10',-23.651898, -46.651898]
  
  
      ];
  
      var infowindow = new google.maps.InfoWindow();
  
      var iconBase = '';
      var marker, i;
      var markers = new Array();
  
      for (i = 0; i &lt; locations.length; i++) {  
        marker = new google.maps.Marker({
          position: new google.maps.LatLng(locations[i][1], locations[i][2]),
          map: map,
          icon: iconBase + ''
        });
  
        markers.push(marker);
  
        google.maps.event.addListener(marker, 'click', (function(marker, i) {
          return function() {
            infowindow.setContent(locations[i][0]);
            infowindow.open(map, marker);
          }
        })(marker, i));
      }
  
      function AutoCenter() {
        //  Create a new viewpoint bound
        var bounds = new google.maps.LatLngBounds();
        //  Go through each...
        $.each(markers, function (index, marker) {
        bounds.extend(marker.position);
        });
        //  Fit these bounds to the map
        map.fitBounds(bounds);
      }
      AutoCenter();
  
  }
  
  function toggleHeatmap() {
  
  if(heatmap.getMap() != null) {
      heatmap.setMap(null);
      for (var i = 0; i &lt; markers.length; i++) {
          markers[i].setMap(null);
      }
  } else {
      heatmap.setMap(map)
      for (var i = 0; i &lt; markers.length; i++) {
          markers[i].setMap(map);
      }
  }
  }
  
  function changeGradient() {
    var gradient = [
      'rgba(0, 255, 255, 0)',
      'rgba(0, 255, 255, 1)',
      'rgba(0, 191, 255, 1)',
      'rgba(0, 127, 255, 1)',
      'rgba(0, 63, 255, 1)',
      'rgba(0, 0, 255, 1)',
      'rgba(0, 0, 223, 1)',
      'rgba(0, 0, 191, 1)',
      'rgba(0, 0, 159, 1)',
      'rgba(0, 0, 127, 1)',
      'rgba(63, 0, 91, 1)',
      'rgba(127, 0, 63, 1)',
      'rgba(191, 0, 31, 1)',
      'rgba(255, 0, 0, 1)']
  
  heatmap.set('gradient', heatmap.get('gradient') ? null : gradient);}
  
  function changeRadius() {
    heatmap.set('radius', heatmap.get('radius') ? null : 35);}
  
  function changeOpacity() {
    heatmap.set('opacity', heatmap.get('opacity') ? null : 0.2);}
  
  google.maps.event.addDomListener(window, 'load', initialize);
  
      &lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;div id="panel"&gt;
        &lt;button onclick="toggleHeatmap()"&gt;Toggle Heatmap&lt;/button&gt;
        &lt;button onclick="changeGradient()"&gt;Change gradient&lt;/button&gt;
        &lt;button onclick="changeRadius()"&gt;Change radius&lt;/button&gt;
        &lt;button onclick="changeOpacity()"&gt;Change opacity&lt;/button&gt;
      &lt;/div&gt;
      &lt;div id="map-canvas"&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>strong text</strong></p>
  
  <p>Any help would be much appreciated. Thanks so much!</p>