title: Google Maps V3: Only show markers in viewport - Clear markers issue
body: <p>I like to create a map with Google Maps that can handle large amounts of markers (over 10.000). To not slow down the map I've created a XML-file that only outputs the markers that are inside the current viewport.</p>
  
  <p>First, I use initialize() to setup the map options:</p>
  
  <pre class="lang-js prettyprint-override"><code>function initialize() {
      var myLatlng = new google.maps.LatLng(51.25503952021694,3.27392578125);
      var myOptions = {
          zoom: 8,
          center: myLatlng,
          mapTypeId: google.maps.MapTypeId.ROADMAP
      }
      var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
  
      google.maps.event.addListener(map, 'tilesloaded', function () {
      loadMapFromCurrentBounds(map);
      }); 
  }
  </code></pre>
  
  <p>When the event 'tilesloaded' is finished, I use loadMapFromCurrentBounds(), this functions will get the current bounds and sends a request to the XML-file to show the markers that are inside the current viewport:</p>
  
  <pre class="lang-js prettyprint-override"><code>function loadMapFromCurrentBounds(map) {
  
      // First, determine the map bounds
      var bounds = map.getBounds();
  
      // Then the points
      var swPoint = bounds.getSouthWest();
      var nePoint = bounds.getNorthEast();
  
      // Now, each individual coordinate
      var swLat = swPoint.lat();
      var swLng = swPoint.lng();
      var neLat = nePoint.lat();
      var neLng = nePoint.lng();
  
      downloadUrl("mapsxml.php?swLat="+swLat+"&amp;swLng="+swLng+"&amp;neLat="+neLat+"&amp;neLng="+neLng+"", function(data) {
          var xml = parseXml(data);
          var markers = xml.documentElement.getElementsByTagName("marker");
          var infoWindow = new google.maps.InfoWindow; 
  
          for (var i = 0; i &lt; markers.length; i++) {
              var address = markers[i].getAttribute("address");
              var type = markers[i].getAttribute("type");
              var name = markers[i].getAttribute("name");
  
              var point = new google.maps.LatLng( 
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng"))
              );
  
              var html = "&lt;b&gt;" + name + "&lt;/b&gt; &lt;br/&gt;" + address;
              var icon = customIcons[type] || {};
  
              var marker = new google.maps.Marker({
              map: map,
              position: point,
              icon: icon.icon,
              shadow: icon.shadow});
  
              bindInfoWindow(marker, map, infoWindow, html);
          }
      })
  }
  </code></pre>
  
  <p>This is working great, however, the current code doesn't offload markers that aren't in de viewport anymore. Besides that, it loads markers again who are already loaded, that slows down the map really fast when moving the map a view times in the same area.</p>
  
  <p>So when the viewport changes, I like to clear the whole map first before loading new markers. What is the best way to do this?</p>