title: google maps v3: how to drop markers, remove, loop again
body: <p>I have been studying Google Maps and I would like to accomplish the following goal:</p>
  
  <p>1) drop markers one by one;</p>
  
  <p>2) delete last marker (so just one is in viewport)</p>
  
  <p>3) drop next marker</p>
  
  <p>4) Have info window opened in each marker</p>
  
  <p>5) repeat operation</p>
  
  <p>I have been trying to twist the code for animations AND trying to set map null (setMap(null)), but with no success after calling the drop function. Any suggestion on how to do that? 
  Bottom line: have something like <a href="http://www.lkozma.net/wpv/" rel="nofollow">this</a>. Of course this has one big extra step of difficult, which is pulling data from database. </p>
  
  <p>Here is the <a href="https://developers.google.com/maps/documentation/javascript/examples/marker-animations-iteration?hl=el-GR" rel="nofollow">code</a>. 
  Any help will be greatly appreciated. </p>
  
  <pre><code> &lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;Marker animations with &lt;code&gt;setTimeout()&lt;/code&gt;&lt;/title&gt;
      &lt;style&gt;
      #map-canvas{
              width:600px;
              height:600px; 
              position: "absolute"; 
              top: 0px; 
              left: 0px; 
              overflow: "hidden";
          } 
          &lt;/style&gt;
      &lt;script src="https://maps.googleapis.com/maps/api/js?v=3.exp&amp;sensor=false"&gt;&lt;/script&gt;
      &lt;script&gt;
  var berlin = new google.maps.LatLng(52.520816, 13.410186);
  
  var neighborhoods = [
    new google.maps.LatLng(52.511467, 13.447179),
    new google.maps.LatLng(52.549061, 13.422975),
    new google.maps.LatLng(52.497622, 13.396110),
    new google.maps.LatLng(52.517683, 13.394393)
  ];
  
  var markers = [];
  var iterator = 0;
  var Marker;
  var map;
  
  function initialize() {
    var mapOptions = {
      zoom: 12,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: berlin
    };
  
    map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);
  drop();
  }
  
  
  function drop(){ 
  for (var i = 0; i &lt; neighborhoods.length; i++) {
      var m = neighborhoods[i];
  
      (function(n){
        setTimeout(function() {
          addMarker(n);
       }, i * 500);
     }(m));
  }
  }
  function addMarker() {
    markers.push(new google.maps.Marker({
      position: neighborhoods[iterator],
      map: map,
      draggable: false,
      animation: google.maps.Animation.DROP
    }));
    iterator++;
  
  }
  
  google.maps.event.addDomListener(window, 'load', initialize);
  
      &lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
  
      &lt;div id="map-canvas"&gt;&lt;/div&gt;
    &lt;/body&gt;
  &lt;/html
  </code></pre>
  
  <p>></p>