JSFiddle - React, Tailwind, and code Playground

by rushijogle

HTML

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyDY0kkJiTPVd2U7aTOAwhc9ySH6oHxOIYM&sensor=false">
</script>

<script>


function initialize(t1 , t2, t3)
{
	var myCenter=new google.maps.LatLng(t1 , t2, t3);
var mapProp = {
  center: myCenter,
  zoom:5,
   disableDefaultUI:true,  
  mapTypeId: google.maps.MapTypeId.ROADMAP
  };

var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);

var marker = new google.maps.Marker({
  position: myCenter,
  title:'Click to zoom'
  });

marker.setMap(map);

google.maps.event.addListener(marker,'click',function() {
  map.setZoom(9);
  map.setCenter(marker.getPosition());
  });
     
google.maps.event.addListener(map,'center_changed',function() {

  window.setTimeout(function() {
    map.panTo(marker.getPosition());
  },3000);
  });
  

  var infowindow = new google.maps.InfoWindow({
  content:t3,
  title: "Marker Title"
  });

infowindow.open(map,marker);
}
google.maps.event.addDomListener(window, 'load', initialize);

</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>

<a href="javascript:void(0)" onClick="initialize('18.5236' , '73.8478', 'Pune')"> Pune </a>
<a href="javascript:void(0)" onClick="initialize('26.0000' , '93.0000', 'Aasam' )"> Aasam </a>
<a href="javascript:void(0)" onClick="initialize('29.0167' , '77.3833', 'Delhi')"> Delhi </a>
<a href="javascript:void(0)" onClick="initialize('17.3667' , '78.4667', 'Hydrabad')"> Hydrabad </a>
</body>
</html>