google maps - updating markers periodically

Question

Have followed googlemapsapi tutorial to display markers, and now looking to add them periodically. Have looked at Google Maps V3: Updating Markers Periodically but I am only getting the map, and no markers displaying.... My code is as follows...

function load() {
     //map object
      var map = new google.maps.Map(document.getElementById("map"), {
        center: {lat: 54.870902, lng: -6.300565}, 
        zoom: 14
      });
      //first call to get and process initial data
      downloadUrl("Map.php", processXML);
  }
     function processXML(data){
     //method to retrieve information via ajax
        var xml = data.responseXML;
        var markers = xml.documentElement.getElementsByTagName("marker");
        //clear markers before adding new ones
        resetMarkers(markersArray);

        for(var i =0; i<markers.length; i++){
            var point = new google.maps.LatLng(
                    parseFloat(markers[i].getAttribute("lat")),
                    parseFloat(markers[i].getAttribute("lng")));
            var marker = new google.maps.Marker({
                map:map,
                position: point
            });
            //store marker object in new array
            markersArray.push(marker);
            marker.setMap(map);

    }
    //set timeout
    setTimeout(function() {
        downloadUrl("Map.php", processXML);
    }, 1000);

}

//cleatr existing markers from map
function resetMarkers(arr){
    for(var i = 0; i<arr.length; i++){
        arr[i].setMap(null);
    }
    //reset the main marker array
    arr = [];
}

Answer 1

This is what worked for me - just iterate through your markers contained in an array, but setTimeout to pause between each iteration....

//store marker object in new array
                markersArray.push(marker);
        }         
              //update markers periodically
              for (var x = 0; x < markersArray.length; x++) {
                setTimeout(function(y) {
                    markersArray[y].setMap(MY_MAP);         
                }, x*10000, x); 
            }

Answer 2

Here are the steps:

• Get the newest marker that is not in the map and add it:

  var marker = new google.maps.Marker({
      position: locations[i].latlng,
      map:map,
      title:locations[i].hour
  });
  markers.push(marker);
  bounds.extend(locations[i].latlng);
  google.maps.event.addListener(marker, 'click', (function(marker, i) {
      return function() {
        infowindow.setContent(
           '<strong>Data: ' + locations[i].Data + '<br>Hour: ' + locations[i].hour + '<br></strong>Aproximate speed: ' + locations[i].speed + ' K/H<br>Aproximate radius: ' + locations[i].radius + ' meters <br>ISP: ' + locations[i].isp+ '<br>Latitude: ' + locations[i].latlng
        );
        infowindow.open(map, marker);
      }
  })(marker, i));
  

• Finally update it via setInterval as mentioned by everyone above:

  var map;
  var markers = [];
  
  setInterval(refreshMap, 3000);
  
  function initialize() {
    var mapOptions = {
        zoom: 12,
        center: new google.maps.LatLng(54.870902,-6.300565),
        mapTypeId: google.maps.MapTypeId.ROADMAP
    };
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    var locations = [];
  
    $.get("getmarkers.php", function(response){
      for(var i = 0; i < response.markers.length; i++) {
        var marker = response.markers[i];
        var myMarker = {
          Data: marker.Data,
          latlng: new google.maps.LatLng(marker.lat, marker.lon),
          hour: marker.hour,
          radius: marker.radius,
          isp: marker.isp,
          speed: marker.speed
        };
  
        locations.push(myMarker);
        addMapMarker(myMarker);
      }
    },'json');
  
    markerClusterer = new MarkerClusterer(map, markers, {
      maxZoom: 16,
      gridSize: 60
    });
    map.fitBounds(bounds);
  }
  

Answer 3

First, I don't know if it's your code or formatting, but the brackets seem to be a bit off, is the closing { of for loop missing?

As it is, I understand that setTimeout is inside the processXML() function, so it should be called recursively, right? If so, check your console for errors and check closing brackets.

If no, change setTimeout to setInterval so the function will be called every 1 second.