title: Delete old map markers and load new ones?
body: <blockquote>
    <p><strong>Possible Duplicate:</strong><br>
    <a href="https://stackoverflow.com/questions/1544739/google-maps-api-v3-how-to-remove-all-markers">Google Maps API v3: How to remove all markers?</a>  </p>
  </blockquote>
  
  
  
  <p>I'm trying to delete the old markers and load new ones.</p>
  
  <p>Here is the code I have that loads certain markers on page load - no issues here:</p>
  
  <pre><code>            (function() {
  
              var customIcons = {
    1: {
      icon: 'redmarker.png',
      shadow: 'markershadow.png'
    },
    2: {
      icon: 'purplemarker.png',
      shadow: 'markershadow.png'
    },
    3: {
      icon: 'silvermarker.png',
      shadow: 'markershadow.png'
    },
    4: {
      icon: 'goldmarker.png',
      shadow: 'markershadow.png'
    }
  };
  
  
                  window.onload = function(){
                      var MY_MAPTYPE_ID = 'custom';
                      var stylez = [ { "stylers": [ { "hue": "#00ccff" }, { "saturation": -100 }, { "lightness": 5 } ] },{ } ];
                      var latlng = new google.maps.LatLng(10, 10);
                      var options = {
                        zoom: 16,
                        center: latlng,
                        panControl: false,
                        zoomControl: false,
                    scaleControl: true,
  
                        mapTypeControlOptions: {
                          mapTypeIds: [MY_MAPTYPE_ID,google.maps.MapTypeId.SATELLITE]
                        },
  
                        mapTypeId: MY_MAPTYPE_ID
                      }; 
                      var map = new google.maps.Map(document.getElementById('map'), options);
                      var styledMapOptions = {
                          name: 'Map'
                      };
                      var jayzMapType = new google.maps.StyledMapType(stylez, styledMapOptions);
                      map.mapTypes.set(MY_MAPTYPE_ID, jayzMapType);
  
  
                      var infoWindow = new google.maps.InfoWindow;
  
    // Change this depending on the name of your PHP file
    downloadUrl("getxml.php", function(data) {
      var xml = data.responseXML;
      var markers = xml.documentElement.getElementsByTagName("marker");
      for (var i = 0; i &lt; markers.length; i++) {
        var name = markers[i].getAttribute("id");
        var address = markers[i].getAttribute("id");
        var type = markers[i].getAttribute("venue_type");
        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);
      }
    });
  
  
  
  //BUTTON SWITCHING ////////////////////////////////////////////////////////////
  //BUTTON SWITCHING ////////////////////////////////////////////////////////////
  //BUTTON SWITCHING ////////////////////////////////////////////////////////////
  //BUTTON SWITCHING ////////////////////////////////////////////////////////////
  //BUTTON SWITCHING ////////////////////////////////////////////////////////////
  //BUTTON SWITCHING ////////////////////////////////////////////////////////////
  //BUTTON SWITCHING ////////////////////////////////////////////////////////////
  jQuery(document).delegate(".topCanBeActive", "click", function( e ) { 
      e.preventDefault();
      jQuery(".topCanBeActive").removeClass("topActive");
      jQuery(this).addClass("topActive");
  
      switch( this.id ){
              case 'all_activity_button':
                       alert("search");
            break;
          case 'events_button':
  
  downloadUrl("getxml2.php", function(data) {
          var xml = data.responseXML;
          var markers = xml.documentElement.getElementsByTagName("marker");
          for (var i = 0; i &lt; markers.length; i++) {
            var name = markers[i].getAttribute("id");
            var address = markers[i].getAttribute("id");
            var type = markers[i].getAttribute("venue_type");
            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);
          }
        });
  
  
            break;
          case 'venues_button':
              alert("venues");
            break;
          case 'search_button':
              alert("search");          
            break;
      }
  });
  
  
  //END ////////////////////////////////////////////////////////////
  //END ////////////////////////////////////////////////////////////
  //END ////////////////////////////////////////////////////////////
  //END ////////////////////////////////////////////////////////////
  //END ////////////////////////////////////////////////////////////
  //END ////////////////////////////////////////////////////////////
  //END ////////////////////////////////////////////////////////////
  //END ////////////////////////////////////////////////////////////
  
  
                  }
  
                  function bindInfoWindow(marker, map, infoWindow, html) {
    google.maps.event.addListener(marker, 'click', function() {
  
  
      infoWindow.setContent(html);
      infoWindow.open(map, marker);
    });
  }
  
  function downloadUrl(url, callback) {
    var request = window.ActiveXObject ?
        new ActiveXObject('Microsoft.XMLHTTP') :
        new XMLHttpRequest;
  
    request.onreadystatechange = function() {
      if (request.readyState == 4) {
        request.onreadystatechange = doNothing;
        callback(request, request.status);
      }
    };
  
    request.open('GET', url, true);
    request.send(null);
  }
  
  function doNothing() {}
  
              })();
  </code></pre>
  
  <p>Now, I created a button section where if you press one button, a different xml file is loaded. Notice the section with the <code>//////////////////////</code> However, upon clicking the button, nothing happens. The xml file itself is okay and loads the desired data. I also receive no errors in firebug.</p>
  
  <p>Any ideas why this happens?</p>
  
  <p>Thanks!</p>