title: Google Maps - how to update markers / positions to existing map using ajax/PHP?
body: <p>I have a working Google Map on my site using Google Maps API v3.
  The map is loaded on pageload and applied with multiple markers/positions from an array of coordinates.</p>
  
  <p>Now, what I want to do is to dynamically update the markers/positions with a new array of coordinates with an ajax call.</p>
  
  <p>Here is an example of my markup:</p>
  
  <pre><code>&lt;div id="map-canvas"&gt;&lt;/div&gt; 
  
  
  &lt;script type="text/javascript"&gt;  
  var LocationData = &lt;?php echo $coordsarray; ?&gt;;
  
  
  function initialize() {
      var map = new google.maps.Map(document.getElementById('map-canvas'), {
        zoom: 10,
        draggable: true
      } );
  
      var bounds = new google.maps.LatLngBounds();
      var infowindow = new google.maps.InfoWindow();
  
      for (var i in LocationData)
      {
          var p = LocationData[i];
          var latlng = new google.maps.LatLng(p[0], p[1]);
          bounds.extend(latlng);
  
          var marker = new google.maps.Marker({
              position: latlng,
              map: map,
              title: p[2]
          });
  
          google.maps.event.addListener(marker, 'click', function() {
              infowindow.setContent(this.title);
              infowindow.open(map, this);
          });
      }
  
      map.fitBounds(bounds);
  }
  
  google.maps.event.addDomListener(window, 'load', initialize);
  
  
  //Ajax call
  var interval = 5000;  // 1000 = 1 second, 3000 = 3 seconds
  function doAjax() {
      jQuery.ajax({
              type: 'POST',
              url: '/codes/LiveVisitsStats/postlivecounter.php',
              dataType : 'html',
              success: function (data) {
              var arr = data.split('|');
                      jQuery('#counterint').html(arr[0]);
                      jQuery('#extrainfoscounter').html(arr[1]);                           
  
  
              },
              complete: function (data) {
                      // Schedule the next
                      setTimeout(doAjax, interval);
              }
      });
  }
  setTimeout(doAjax, interval);
  &lt;/script&gt;
  </code></pre>
  
  <p>So what I now need to do is to send an array of coordinated via the Ajax call and on success update the existing Google Map with new coordinates.
  I have tried to find a documentation of this but no luck..
  If someone knows a good way to do this please help.</p>