Delete Button For Circles/Polygons in Google Maps

Delete Button For Circles/Polygons in Google Maps V3

by Loy Alvares

HTML

<link rel="stylesheet" href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css">
<div id="map" class="map"></div>
<script	src="https://maps.googleapis.com/maps/api/js?key=AIzaSyD7MXQvcn_gskiZeZGhhXekqN1zjUX9fVM&libraries=drawing&callback=initMap" async defer></script>

CSS

/* Always set the map height explicitly to define the size of the div element that contains the map. */
.map {
  height: 100%;
}

/* Optional: Makes the sample page fill the window. */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* CSS for the Delete Button. */
.deleteOverlayButton {
  background: #dee0df;
  color: #000;
  /* font-family: 'Helvetica', 'Arial', sans-serif; */
  font-size: 11.4px;
  font-weight: bold;
  text-align: center;
  width: 14px;
  height: 15px;
  border-radius: 8px;
  box-shadow: 1px 0px -1px rgba(0, 0, 0, .3);
  position: absolute;
  padding: 0px 0px 0px 0px;
  margin-top: 7px;
  margin-left: 8px;
  border: 1px solid #999;
  cursor: pointer;
}

.deleteOverlayButton:hover {
  background: #eee;
}

JavaScript

/**
 * author: Loy Alvares
 */

function initMap() {
	setInitialMapOptions();
	map = getMapObject(mapOptions);
	drawingManager = getDrawingManagerObject();
	google.maps.event.addListener(drawingManager, 'overlaycomplete', onOverlayComplete);
	initializeDeleteOverlayButtonLibrary();
}

// Get Map Geo Center Denver, USA Coordinates
var center = {lat: 39.810866, lng: -104.990347};
var map, drawingManager, mapOptions = {};
var listenerFiltersApplied = false;
var circleOptions = {
        fillColor: "#e20000",
        fillOpacity: 0,
        strokeColor: "#e20000",
        strokeWeight: 4,
        strokeOpacity: 1,
        clickable: false,
        editable: true,
        suppressUndo: true,
        zIndex: 999
  	};
var polygonOptions = {
		editable: true,
		fillColor: "#e20000",
        fillOpacity: 0,
		strokeColor: "#e20000",
		strokeWeight: 4,
	    strokeOpacity: 1,
	    suppressUndo: true,
	    zIndex: 999
	};

function setInitialMapOptions() {
	mapOptions = {
			zoom: 4,
			center: center,
			styles: [
				{"featureType":"road", elementType:"geometry", stylers: [{visibility:"off"}]},	//turns off roads geometry
				{"featureType":"road", elementType:"labels", stylers: [{visibility:"off"}]},	//turns off roads labels
				{"featureType":"poi", elementType:"labels", stylers: [{visibility:"off"}]},  //turns off points of interest lines
				{"featureType":"poi", elementType:"geometry", stylers: [{visibility:"off"}]},  //turns off points of interest geometry
				{"featureType":"transit", elementType:"labels", stylers: [{visibility:"off"}]},  //turns off transit lines labels
				{"featureType":"transit", elementType:"geometry", stylers: [{visibility:"off"}]},	//turns off transit lines geometry
				{"featureType":"administrative.land_parcel", elementType:"labels", stylers: [{visibility:"off"}]},  //turns off administrative land parcel labels
				{"featureType":"administrative.land_parcel", elementType:"geometry", stylers: [{visibility:"off"}]},  //turns off...