JSFiddle - React, Tailwind, and code Playground

by witold

HTML

<html>
<head>
<title>Clearing Overlays On A Map</title>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var Demo = {
  map: null,
  markers: [],
  polyline: null,
  polygon: null
};
  
/**
 * Shows or hides all marker overlays on the map.
 */
Demo.toggleMarkers = function(opt_enable) {
  if (typeof opt_enable == 'undefined') {
    opt_enable = !Demo.markers[0].getMap();
  }
  for (var n = 0, marker; marker = Demo.markers[n]; n++) {
    marker.setMap(opt_enable ? Demo.map : null);
  }
};

/**
 * Shows or hides the polyline overlay on the map.
 */
Demo.togglePolyline = function(opt_enable) {
  if (typeof opt_enable == 'undefined') {
    opt_enable = !Demo.polyline.getMap();
  }
  Demo.polyline.setMap(opt_enable ? Demo.map : null);
};

/**
 * Shows or hides the polygon overlay on the map.
 */
Demo.togglePolygon = function(opt_enable) {
  if (typeof opt_enable == 'undefined') {
    opt_enable = !Demo.polygon.getMap();
  }
  Demo.polygon.setMap(opt_enable ? Demo.map : null);
};

Demo.toggleAllOverlays = function() {
  var enable = true;
  if (Demo.markers[0].getMap() ||
      Demo.polyline.getMap() ||
      Demo.polygon.getMap()) {
    enable = false;
  }
  Demo.toggleMarkers(enable);
  Demo.togglePolyline(enable);
  Demo.togglePolygon(enable);
};

/**
 * Called only once on initial page load to initialize the map.
 */
Demo.init = function() {
  // Create single instance of a Google Map.
  Demo.map = new google.maps.Map(document.getElementById("map-canvas"), {
    zoom: 7,
    center: new google.maps.LatLng(20.352524120908313, -156.51013176888227),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  });
  
  // Create multiple Marker objects at various positions.
  var markerPositions = [
    new google.maps.LatLng(21.297222168933754, -157.86145012825727),
    new google.maps.LatLng(19.650520003641244, -155.09289544075727),
 ...