title: Google Maps V3: Updating Markers Periodically
body: <p>I've followed the PHP/MYSQL tutorial on Google Maps found <strong><a href="http://code.google.com/apis/maps/articles/phpsqlajax_v3.html" rel="nofollow">here</a></strong>.</p>
  
  <p>I'd like the markers to be updated from the database every 5 seconds or so.</p>
  
  <p>It's my understanding I need to use Ajax to periodicity update the markers, but I'm struggling to understand where to add the function and where to use <strong>setTimeout()</strong> etc</p>
  
  <p>All the other examples I've found don't really explain what's going on, some helpful guidance would be terrific!</p>
  
  <p>This is my code (Same as Google example with some <strong>var</strong> changes):</p>
  
  <pre><code>function load() {
    var map = new google.maps.Map(document.getElementById("map"), {
      center: new google.maps.LatLng(37.80815648152641, 140.95355987548828),
      zoom: 13,
      mapTypeId: 'roadmap'
    });
    var infoWindow = new google.maps.InfoWindow;
  
    // Change this depending on the name of your PHP file
  
    downloadUrl("nwmxml.php", function(data) {
      var xml = data.responseXML; 
      var markers = xml.documentElement.getElementsByTagName("marker");
      for (var i = 0; i &lt; markers.length; i++) {
        var host = markers[i].getAttribute("host");
        var type = markers[i].getAttribute("active");
        var lastupdate = markers[i].getAttribute("lastupdate");
        var point = new google.maps.LatLng(
            parseFloat(markers[i].getAttribute("lat")),
            parseFloat(markers[i].getAttribute("lng")));
        var html = "&lt;b&gt;" + "Host: &lt;/b&gt;" + host + "&lt;br&gt;" + "&lt;b&gt;Last Updated: &lt;/b&gt;" + lastupdate + "&lt;br&gt;";
        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);
  
      }
  
    });
  }
  
  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>I hope somebody can help me!</p>