JSFiddle - React, Tailwind, and code Playground

by Sandeep Pujare

HTML

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyByR4qPMFt8gCE7DpkbioQCgPSG2Fvna58&amp;libraries=places"></script>
<div id="map" style="height:500px">

</div>

JavaScript

var latlngarray=[{lat:18.9515358, lng: 72.7975583}, {lat:19.0207793, lng: 72.8341091}, {lat:19.05453, lng: 72.8211323}, {lat:19.1387313, lng:72.8078544}];
var centerlatlng={lat: 20.5937, lng: 78.9629};
var zoomlevel=8;

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);
  	}
}
initMap();