JSFiddle - React, Tailwind, and code Playground
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);
google.maps.addListenerOnce(map, 'idle', function () {
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);
};
}