title: Google Map V3 Remove Markers before updating
body: <p>I'm asking you for help because i'm stuck on a problem for several hours and i don't find the end of this problem ...
  Each time my markers list is updated when a visitor moves on the map, markers are added on top of those already added. I tried several ways to remove all the markers before updating but without success.</p>
  
  <p>Here's my <code>initialize</code> function : </p>
  
  <pre><code>function initalize() {
      // Creating a new map
      var mapDiv = document.getElementById("googlemap");
      mapCanvas = new google.maps.Map(mapDiv, {
          mapTypeId : google.maps.MapTypeId.ROADMAP,
          noClear : true
      });
  
      var latlng = new google.maps.LatLng(49, 2);
  
      // Add a control
      // Generate bunch markers
      var sw = new google.maps.LatLng(-19.,-152.);
      var ne = new google.maps.LatLng(76,58 );
      var bounds = new google.maps.LatLngBounds(sw, ne);
      mapCanvas.setCenter(latlng);
      mapCanvas.setZoom(10);
  
      var lat, lng, category, json = [];
      var categories = ["cat1", "cat2", "cat3"];
  
      // Creating a global infoWindow object that will be reused by all markers
      infoWnd = new google.maps.InfoWindow();
  
      // Marker Clusterer setup
      clusterer.cat1 = new MarkerClusterer(mapCanvas, [], mcOptions);
      clusterer.cat2 = new MarkerClusterer(mapCanvas, [], mcOptions);
      clusterer.cat3 = new MarkerClusterer(mapCanvas, [], mcOptions);
  
      google.maps.event.addListener(mapCanvas, 'tilesloaded', function () {
          loadMapFromCurrentBounds(mapCanvas);
      }); 
  
  
      google.maps.event.addListener(mapCanvas, 'rightclick', function(event) {
          placeMarker(event.latLng, mapCanvas);
      });
  
      google.maps.event.addListener(mapCanvas, 'click', function() {
          infoWnd.close();
      });
  </code></pre>
  
  <p>}</p>
  
  <p>When the map is loadded loadMapFromCurrentBounds function is called :</p>
  
  <pre><code>function loadMapFromCurrentBounds(map) 
  {
  
      // We first remove the markers before updating
      for(var i=0; i &lt; markers.length; i++){
          markers[i].setMap(null);
      }
      markers = new Array();
  
      // 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();
  
      var radius = google.maps.geometry.spherical.computeDistanceBetween(swPoint, nePoint);
      var center = map.getCenter();
  
      var searchUrl = 'searchdatabase.php5?lat=' + center.lat() + '&amp;lng=' + center.lng() + '&amp;radius=' + radius;
  
      downloadUrl(searchUrl, function(data) {
  
          var xml = parseXml(data);
          var markerNodes = xml.documentElement.getElementsByTagName("marker");
  
          var bounds1 = new google.maps.LatLngBounds();
  
          for (var i = 0; i &lt; markerNodes.length; i++) 
          {
              var categorie = markerNodes[i].getAttribute("categorie");
              var name = markerNodes[i].getAttribute("name");
              var address = markerNodes[i].getAttribute("address");
              //var icon = markerNodes[i].getAttribute("typeicon");
              var distance = parseFloat(markerNodes[i].getAttribute("distance"));
              var latlng = new google.maps.LatLng(
                  parseFloat(markerNodes[i].getAttribute("lat")),
                  parseFloat(markerNodes[i].getAttribute("lng"))
              );
  
               if ( categorie in markers == false) {
                  markers[categorie] = [];
                }
  
              var marker = createMarker({
                  idvar : idvar,
                  idtypelieu : TypeLieu[categorie],   
                  position : latlng,
                  title : name,
                  // draggable: true,
                  icon : categoryIcons[categorie],
                  description : address,
                  categorie : categorie,
              });
          }
      })
  }
  </code></pre>
  
  <p>And here's the <code>createMarker</code> function: </p>
  
  <pre><code>function createMarker(options) 
  {
  
      var marker = new google.maps.Marker(options);
  
      google.maps.event.addListener(marker, "click", function(){
        infoWnd.setContent(options.description);
        infoWnd.open(mapCanvas, marker);
      });
  
      if(mapCanvas.getBounds().contains(marker.getPosition()))
      {
          var lacategorie = options.categorie;
  
          $("#"+lacategorie).append("&lt;span class=SubList&gt;&lt;a href=Lieu-" +options.idvar+ "-"+options.idtypelieu+"-1.html&gt;" + options.title + "&lt;/a&gt;&lt;/span&gt;");
  
      }
  
  
      markers[options.categorie].push(marker);
      return marker;
  }
  </code></pre>
  
  <p>And so my problem, each time <code>loadMapFromCurrentBounds</code> is called when the user is zooming in on or moving the map, markers are added but don't replace the previous one, so each cluster is incrementing at update, and markers are superimposed.</p>
  
  <p>I have tried several ways to remove the markers but without success.</p>
  
  <p>Can somebody help me find where is my error?</p>