gmaps.js bouncy markers
HTML
<!-- jquery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<!-- bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.css" media="screen" />
<!-- google maps -->
<script src="http://maps.google.com/maps/api/js?sensor=true&.js"></script>
<div id="map"></div>
CSS
html,
body,
#map {
display: block;
width: 100%;
height: 100%;
}
#map {
background: #58B;
}
JavaScript
var markers = [
{
"title": 'SW',
"lat": ' 48.8915',
"lng": '-61.03444',
"description": ''
},
{
"title": 'SW',
"lat": ' 48.8915',
"lng": '-74.33444',
"description": ''
},
{
"title": 'SW',
"lat": ' 38.357909600403',
"lng": '-33.20068359375',
"description": ''
},
{
"title": 'SW',
"lat": ' 58.237715384471',
"lng": '-103.60107421875',
"description": ''
}
];
var map;
var markerObjects = [];
function initialize() {
var myOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map"), myOptions);
var i = 0;
var interval = setInterval(function () {
var data = markers[i];
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: data.title,
animation: google.maps.Animation.DROP
});
var markerIndex = markerObjects.push(marker) - 1;
google.maps.event.addListener(markerObjects[markerIndex], 'click', toggleBounce);
i++;
if (i == markers.length) {
clearInterval(interval);
}
}, 200);
} // initialize
function toggleBounce() {
if (marker.getAnimation() != null) {
marker.setAnimation(null);
} else {
marker.setAnimation(google.maps.Animation.BOUNCE);
}
}
google.maps.event.addDomListener(window, 'load', initialize);