JSFiddle - React, Tailwind, and code Playground

by argiropoulostauros

HTML

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/DTD/loose.dtd">
<html>
<head>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script><script>
          function initialize() {
        var myOptions = {
          zoom: 6,
          center: new google.maps.LatLng(15, 15),
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        map = new google.maps.Map(document.getElementById('map_canvas'),
            myOptions);
      }
          google.maps.event.addDomListener(window, 'load', initialize); 
    </script>
</head>
<body>
  <div id="map_canvas" style="width: 400px; height: 300px"></div>
  <p><input type="button" value="Load data" onclick="action();"> <b>Status:</b><span id="status" style=""></span></p>
</body>
</html>

JavaScript

// this is the important code

var polygons = [];

function action()
{
    undraw_all_squares(polygons);
    document.getElementById('status').innerHTML = 'Loading!!!';
    polygons = draw_all_squares(map);
    document.getElementById('status').innerHTML = 'DONE';
}

// only auxiliary functions - not important to look at

function draw_all_squares(my_map) 
{    
    var squares = 20;
    var polygons = [];
    lat0 = 15;
    lng0 = 15;
    lat_step = lng_step = 0.1;
    for (x = -squares; x <= +squares; x++) {
        for (y = -squares; y <= +squares; y++) {
            var center = new google.maps.LatLng(
                lat0 + lat_step * y, 
                lng0 + lng_step * x
            );


            var opts = {
                  bounds: new google.maps.LatLngBounds(
                      new google.maps.LatLng(lat0 + lat_step * y, lng0 + lng_step * x),
                      new google.maps.LatLng(lat0 + lat_step * (y + 1), lng0 + lng_step * (x + 1))
                  ),
                  map: my_map,
                  clickable: false,
                  strokeColor: "#FF0000",
                  strokeOpacity: 0.8,
                  strokeWeight: 2,
                  fillColor: "#FF0000",
                  fillOpacity: 0.35
            };
            var poly = new google.maps.Rectangle(opts);
            polygons.push(poly);
        }
    }
    return polygons;
}


function undraw_all_squares(polygons)
{
    if (!polygons)
        return;
    for (var i = 0; i < polygons.length; i++) {
        polygons[i].setMap(null);
    };
}