JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://maps.googleapis.com/maps/api/js?sensor=false&amp;libraries=geometry,places&amp;ext=.js"></script>
<div id="map-canvas" style="border: 2px solid #3872ac;"></div>
<div id="order_list"></div>
<div id="product-list-display"></div>

CSS

html, body, #map-canvas {
    height: 500px;
    width: 500px;
    margin: 0px;
    padding: 0px
}

JavaScript

var overlay;
USGSOverlay.prototype = new google.maps.OverlayView();
var markers = [];
var map;
var india = new google.maps.LatLng(23.9800, 85.3500);
var image = 'http://maps.google.com/mapfiles/ms/icons/blue.png';
var locations = [];
function showdiv() {
}
function initialize() {
    var mapOptions = {
        zoom: 5,
        disableDefaultUI: true,
        center: india
    };

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

    var swBound = new google.maps.LatLng(0.615223, 67.368164);
    var neBound = new google.maps.LatLng(41.996828, 104.890);
    var bounds = new google.maps.LatLngBounds(swBound, neBound);

    // The photograph is courtesy of the U.S. Geological Survey.
    // The photograph is courtesy of the U.S. Geological Survey.
    var srcImage = 'https://developers.google.com/maps/documentation/javascript/';
    srcImage += 'examples/full/images/talkeetna.png';

    var sw = bounds.getSouthWest();
    var ne = bounds.getNorthEast();
    for (var i = 0; i < 100; i++) {
        var ptLat = Math.random() * (ne.lat() - sw.lat()) + sw.lat();
        var ptLng = Math.random() * (ne.lng() - sw.lng()) + sw.lng();
        var point = new google.maps.LatLng(ptLat, ptLng);
        locations[i] = ["city" + i, "cat" + i, point, ""];
    }

    // The custom USGSOverlay object contains the USGS image,
    // the bounds of the image, and a reference to the map.
    overlay = new USGSOverlay(bounds, srcImage, map);

    drop(3000);

    setTimeout(function () {
        clearMarkers();
        // initialize();
    }, 19000);

}

function drop() {
    clearMarkers();
    for (var i = 0; i < locations.length; i++) {
        var city = locations[i][0];
        var pro_cat = locations[i][1];
        var product_image = locations[i][3];
        addMarkerWithTimeout(locations[i][2], i * 500);
        getCity(city, pro_cat, i * 500);
        if (product_image == null) {
            //if image found in row-do nothing
        } else {
    ...