JSFiddle - React, Tailwind, and code Playground

by sarathsprakash

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false&amp;extension=.js"></script>
<div id="map" style="width:500px;height:380px;"></div>

JavaScript

var myStyles = [{
    featureType: "poi",
    elementType: "labels.icon",
    stylers: [{
        visibility: "off"
    }]
}];
var marker = new google.maps.Marker({
    position: new google.maps.LatLng(51.508742, -0.120850),
    map: map,
    title: "Hello World!"
});
var mapProp = {
    center: new google.maps.LatLng(51.508742, -0.120850),
    zoom: 5,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    styles: myStyles
};

var map = new google.maps.Map(document.getElementById("map"), mapProp);
marker.setMap(map);
 google.maps.event.addListener(marker,'click',function() {
    var zoom = map.getZoom()+1;
    map.setZoom(zoom);
    setit(3);
    marker.setMap(null);
  map.setCenter(marker.getPosition());
    });

function setit(a)
{
   
   for(var i =1; i<=a;i++)
   {
    marker = new google.maps.Marker({
    position: new google.maps.LatLng(51.508742+i, -0.120850),
    map: map,
    title: "Hello World!"
    });
    marker.setMap(map);
       google.maps.event.addListener(marker,'click',function() {
    var zoom = map.getZoom()+1;
    map.setZoom(zoom);
   // alert(marker.getPosition());
    setit(3)
  map.setCenter(marker.getPosition());
  });
   }
}    
google.maps.event.addListener(map,'zoom_changed',function() {
   // var zoom = map.getZoom()
    setit(3);
    marker.setMap(null);
  map.setCenter(marker.getPosition());
  });