I have a map integrated on my web page with marker animation. I have multiple markers in the map. I want to achieve something like, when any of the marker is clicked then other marker's animation should stop which is currently running.
Currently i am able to stop animation of the same marker on the marker click. There must be some marker object i should get in the case of multiple markers.
So far i have done this.
latlngarray is an array with lattitude and longitude in object format.
var centerlatlng={center lat lng are here};
var zoomlevel=zoomlevel is here;
function initMap(){
map = new google.maps.Map(document.getElementById('map'),{
center: centerlatlng,
zoom: zoomlevel
});
if(latlngarray.length > 0){
for(i=0; i < latlngarray.length; i++){
marker = new google.maps.Marker({
position: latlngarray[i],
map: map
});
marker.addListener('click', function(){
toggleBounce(this);
map.setZoom(10);
map.setCenter(marker.getPosition());
});
}
}}
function toggleBounce(ele){
if(ele.getAnimation() !== null){
ele.setAnimation(null);
}else{
ele.setAnimation(google.maps.Animation.BOUNCE);
}}