CODEWITHSUNDEEP
javascriptgoogle-maps
Tom Stokes
Tom Stokes

Reputation: 13

Google Maps API V3 Clearing Markers Before Update

I have searched and searched for an answer with no luck. I can get the xml data to display fine and it appears that my markers refresh but just wont remove the previous one so they stack up. Any help would be great! I just need to remove the markers before the new ones appear. Thanks!

    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

    <script type="text/javascript">
    //<![CDATA[
var markersArray = [];
    var customIcons = {
      restaurant: {
        icon: 'pin.png',
        shadow: ''
      },
      bar: {
        icon: 'loc1.png',
        shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
      },
airport: {
        icon: 'loc2.png',
        shadow: 'http://labs.google.com/ridefinder/images/mm_20_shadow.png'
      }
    };

    function load() {
      var map = new google.maps.Map(document.getElementById("map"), {
        center: new google.maps.LatLng(37.0923204, -95.9042496),
        zoom: 5,
        mapTypeId: 'roadmap'
      });
      var infoWindow = new google.maps.InfoWindow;

      // Change this depending on the name of your PHP file
setInterval(function() {

      downloadUrl("phpsqlajax_genxmlall.php", function(data) {

        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
resetMarkers(markersArray)
        for (var i = 0; i < markers.length; i++) {
          var name = markers[i].getAttribute("name");
          var address = markers[i].getAttribute("address");
var amount = markers[i].getAttribute("amount");
var time = markers[i].getAttribute("time");
          var type = markers[i].getAttribute("type");
          var point = new google.maps.LatLng(
              parseFloat(markers[i].getAttribute("lat")),
              parseFloat(markers[i].getAttribute("lng")));
          var html = "<b>" + name + "</b> <br/>" + address + "<br/>$" + amount + " at " + time;
          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);

        }


      });
}, 5000);
    }
function resetMarkers(arr){
    for (var i=0;i<arr.length; i++){
        arr[i].setMap(null);
    }
    //reset the main marker array for the next call
    arr=[];
}
    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() {}

    //]]>

  </script>

  </head>

  <body onload="load()">

    <div id="map" style="width: 1400px; height: 800px"></div>
  </body>

Upvotes: 0

Views: 1928

Answers (1)

keune
keune

Reputation: 5795

The problem is, you are not adding your markers to markerArray, it stays empty, so there is nothing to remove when you call resetMarkers

After creating the marker, add it to markerArray:

var marker = new google.maps.Marker({
  map: map,
  position: point,
  icon: icon.icon,
  shadow: icon.shadow
});
markerArray.push(marker);

Upvotes: 2

Related Questions