Web Tutorials

Interview Q & A

Code Examples

Utility Tools

Add Marker Animation with setTimeout() on Google Maps

In this example you will learn how to add marker animations with setTimeout() function in google map.

Here you can view the output of the example and you can also "try it yourself" by clicking on "Live Demo" button given at the bottom.

Syntax

function drop() {  
  removeMarkers();  
  for (var i = 0; i < dropMarkers.length; i++) {  
    addMarkerWithTimeout(dropMarkers[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);  
}

Add Marker Animation with setTimeout() on Google Maps Example

<!DOCTYPE html>  
<html>  
  <head> <!-- www.techstrikers.com -->  
    <meta charset="utf-8">  
    <title>Marker animations with <code>setTimeout()</code></title>  
    <style>  
      html, body {  
        height: 100%;  
        margin: 0;  
        padding: 0;  
      }  
      #map {  
        height: 99%; 
        width: 99%;
      }  
#panel {  
  position: absolute;  
  top: 10px;  
  left: 25%;  
  z-index: 5;  
  background-color: #fff;  
  padding: 0px;  
  border: 1px solid #999;  
  text-align: center;  
}  

#panel, .panel {  
  font-family: 'Roboto','sans-serif';  
  line-height: 0px;  
  padding-left: 0px;  
}  
 
#panel select, #panel input, .panel select, .panel input {  
  font-size: 15px;  
}  
 
#panel select, .panel select {  
  width: 100%;  
}  
 
#panel i, .panel i {  
  font-size: 12px;  
}  
  
    </style>  
    <script async defer  
        src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap"></script>  
<script>  
 var lat_lng = {lat:22.08672, lng: 78.42444}; 
    
var dropMarkers = [{lat:22.17754, lng:76.38519},    
{lat:21.38179, lng:82.6034},    
{lat:22.0757, lng:79.1537},    
{lat:23.8961, lng:82.4276},    
{lat:24.9365, lng:78.9559},    
{lat:22.11649, lng:85.8114}]; 
  
var markers = [];  
var map;  
  
function initMap() {  
  map = new google.maps.Map(document.getElementById('map'), {  
    zoom: 6,  
    center: lat_lng  
  });  
}  
  
function drop() {  
  removeMarkers();  
  for (var i = 0; i < dropMarkers.length; i++) {  
    addMarkerWithTimeout(dropMarkers[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);  
}  
  
function removeMarkers() {  
  for (var i = 0; i < markers.length; i++) {  
    markers[i].setMap(null);  
  }  
  markers = [];  
}  
  
  </script>  
  </head>  
  <body>  
    <div id="panel" style="margin-left: -52px">  
      <button id="drop" onclick="drop()">Show Markers</button>  
     </div>  
    <div id="map"></div>  
  </body>  
</html>

Above example will produce following output