JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html> 
<html> 
<head> 
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
<title>Google Maps JavaScript API v3 Example: Marker Animations Loop</title> 
<link href="http://code.google.com/apis/maps/documentation/javascript/examples/standard.css" rel="stylesheet" type="text/css" /> 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script type="text/javascript"> 
  var berlin = new google.maps.LatLng(52.520816, 13.410186);
 
  var neighborhoods = [
    new google.maps.LatLng(52.511467, 13.447179),
    new google.maps.LatLng(52.549061, 13.422975),
    new google.maps.LatLng(52.497622, 13.396110),
    new google.maps.LatLng(52.517683, 13.394393)
  ];
 
  var markers = [];
  var iterator = 0;
 
  var map;
 
  function initialize() {
    var mapOptions = {
      zoom: 12,
      mapTypeId: google.maps.MapTypeId.ROADMAP,
      center: berlin
    };
 
    map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
  }
 
  function drop() {
    for (var i = 0; i < neighborhoods.length; i++) {
      setTimeout(function() {
        addMarker();
      }, i * 200);
    }
  }
 
  function addMarker() {
    markers.push(new google.maps.Marker({
      position: neighborhoods[iterator],
      map: map,
      draggable: false,
      icon:  'http://www.google.com/mapfiles/arrow.png',
      shadow: 'http://www.google.com/mapfiles/arrowshadow.png',    
      animation: google.maps.Animation.DROP
    }));
    iterator++;
  }
</script> 
</head> 
<body onload="initialize()"> 
<div id="map_canvas" style="width: 500px; height: 400px;">map div</div> 
<button id="drop" onclick="drop()">Drop Markers</button> 
</body> 
</html>