How to specify the delay for the google map marker

Question

I'm placing a marker on google map from the array values and multiple push pin markers will be shown on the map. I want to specify the delay time for each marker shown on the map. How can I do that?

var map = new google.maps.Map(document.getElementById('map-canvas'), {
  zoom: 5,
  center: new google.maps.LatLng(21.9200,77.9000),
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

var infowindow = new google.maps.InfoWindow();  
var image = 'images/pushpins/set1.png';    
var marker, i;


google.maps.event.addListener(marker, 'click', (function(marker, i) {
  return function() {
    infowindow.setContent(locations[i][0]);
    infowindow.open(map, marker);
  }
})(marker, i));

function placeMarkers(){
  for (i = 0; i < locations.length; i++) {  
    marker = new google.maps.Marker({
    window.setInterval(5000);
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map,
    icon: image
  });
}

Here i am placing the marker, using loop with set interval, but its not working.

function placeMarkers(){
  for (i = 0; i < locations.length; i++) {  
    marker = new google.maps.Marker({
    window.setInterval(5000);
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map,
    icon: image
  });

I have added the set interval(), but still the markers appear all at a time, i want it to come one after the other with a delay time.

Answer 1

you should try timeout here's how it's works

for (var i = 0; i < locations.length; i++) {
    addMarkerWithTimeout(locations[i], i * 200);
  }

function addMarkerWithTimeout(position, timeout) {
  window.setTimeout(function() {
    markers.push(new google.maps.Marker({
      position: position,
      map: map,
      animation: google.maps.Animation.DROP
    }));
  }, timeout);
}

Here's a quick demo.

Answer 2

Here is a corrected version of placeMarkers function that utilizes window.setTimeout function:

function placeMarkers(map, positions, timeout) {
    for (var i = 0; i < positions.length; i++) {
        (function(i) {
            window.setTimeout(function() {
                markers.push(new google.maps.Marker({
                    position: positions[i],
                    map: map
                }));
            }, timeout*i);
        })(i);
    }
}

Complete example

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 map;

function initialize() {
    var mapOptions = {
        zoom: 12,
        center: berlin
    };

    map = new google.maps.Map(document.getElementById('map-canvas'),
            mapOptions);
}

function drop() {
    clearMarkers();
    placeMarkers(map,neighborhoods,400);
}


function placeMarkers(map, positions, timeout) {
    for (var i = 0; i < positions.length; i++) {
        (function(i) {
            window.setTimeout(function() {
                markers.push(new google.maps.Marker({
                    position: positions[i],
                    map: map
                }));
            }, timeout*i);
        })(i);
    }
}



function clearMarkers() {
    for (var i = 0; i < markers.length; i++) {
        markers[i].setMap(null);
    }
    markers = [];
}

google.maps.event.addDomListener(window, 'load', initialize);

html, body, #map-canvas {
            height: 100%;
            margin: 0px;
            padding: 0px;
}

#panel {
            position: absolute;
            top: 5px;
            left: 50%;
            margin-left: -180px;
            z-index: 5;
            background-color: #fff;
            padding: 5px;
            border: 1px solid #999;
}

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<div id="panel" style="margin-left: -52px">
    <button id="drop" onclick="drop()">Drop Markers</button>
</div>
<div id="map-canvas"></div>