title: Google Maps JavaScript API v3 remove markers
body: <p>I have looked at a large number of "similar" questions and none of the solutions/answers seem to work for me so here we go:  I am generating a simple Google Map with a single marker "onload"  I then have a menu list a bit like this</p>
  
  <pre><code>&lt;ul&gt;
  &lt;li class="toggle" id="beaches"&gt;Item&lt;/li&gt;
  &lt;li class="toggle" id="towns"&gt;Item&lt;/li&gt;
  &lt;ul&gt;
  </code></pre>
  
  <p>that on click uses these arrays to marker-populate the map</p>
  
  <p>jQuery - </p>
  
  <pre><code>$(".toggle").click(function(){
  setMarkers(map,$(this).attr('id'));
  });
  
  var beaches = [
  ['Beach 1',38.285827, 20.611038, 4],
  ['Beach 2', 38.304958,20.604515, 5],
  ['Beach 3',38.301691,20.597649, 3]
  ];
  
  var towns = [
  ['Town 1',38.343003, 20.535679, 4],
  ['Town 2',38.339334,20.545807, 5]
  ];
  </code></pre>
  
  <p>My population function looks like this:</p>
  
  <pre><code>function setMarkers(map, locations) {
  for (var i = 0; i &lt; locations.length; i++) {
  var newmarker = locations[i];
  var myLatLng = new google.maps.LatLng(newmarker[1], newmarker[2]);
  var marker = new google.maps.Marker({
  position: myLatLng,
  map: map,
  title: newmarker[0],
  zIndex: newmarker[3]
  });
  }
  </code></pre>
  
  <p>But what I need/want to do is clear <strong>all</strong> markers first before adding the new ones.  Suggestions please Thanks</p>