I am currently working on a map-based web application. Previous rectangle (or polygon) that is already drawn should be deleted before I draw new rectangle by drawing layer tool on Google Map.
There is "overlaycomplete" event on Google Map, but if I use it, previous rectangle is removed after drawing new rectangle is completed(mouse-up). However, I need to remove previous rectangle before process of drawing new rectangle starts(mouse-down). Two rectangle should not be seen at the same time on the map!
All feedbacks appreciated!
Here is jsFiddle! - http://jsfiddle.net/sean35/41Lrcq7L/30/
Example code:
function initialize() {
var centerInfo = document.getElementById("mainForm:centerInfo").value;
var zoomInfo = document.getElementById("mainForm:zoomInfo").value;
centerInfo = centerInfo.split(",");
var mapOptions = {
center : {
lat : parseFloat(centerInfo[0]),
lng : parseFloat(centerInfo[1])
},
zoom : parseInt(zoomInfo)
};
map = new google.maps.Map(document.getElementById('deviceControlMap'), mapOptions);
var drawingManager = new google.maps.drawing.DrawingManager({
// drawingMode: google.maps.drawing.OverlayType.RECTANGLE,
drawingControl : true,
drawingControlOptions : {
position : google.maps.ControlPosition.TOP_CENTER,
drawingModes : [
// google.maps.drawing.OverlayType.POLYGON,
google.maps.drawing.OverlayType.RECTANGLE ]
},
rectangleOptions : {
strokeWeight : 1,
clickable : true,
editable : false,
zIndex : 1
}
});
drawingManager.setMap(map);
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
if (event.type == google.maps.drawing.OverlayType.RECTANGLE) {
if(rectangle != null)
rectangle.setMap(null);
closeDimSubWin();
rectangle = event.overlay;
var bounds = rectangle.getBounds();
console.log(bounds);
}
});
google.maps.event.addListener(drawingManager, "drawingmode_changed", function() {
if(rectangle != null)
rectangle.setMap(null);
});
// when the user clicks somewhere else on the map.
google.maps.event.addListener(map, 'click', function() {
if(rectangle != null)
rectangle.setMap(null);
});
}
google.maps.event.addDomListener(window, 'load', initialize);
EDIT: I wrote two similar question before. But I deleted them and wrote this question with extended information. I hope that the question is understandable.
Select the items in the Places panel and use the delete key on the keyboard, or right click and delete.
Draw a path or polygonTo make a path or polygon into a 3D object, click Altitude. A "New Path" or "New Polygon" dialog will pop up. You may need to move it out of the way before moving on to the next step. To draw the line or shape you want, click a start point on the map and drag.
One option:
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
if (event.type == google.maps.drawing.OverlayType.RECTANGLE) {
if(rectangle != null)
rectangle.setMap(null);
rectangle = event.overlay;
var bounds = rectangle.getBounds();
console.log(bounds);
drawingManager.setDrawingMode(null);
}
});
google.maps.event.addListener(drawingManager, "drawingmode_changed", function() {
if ((drawingManager.getDrawingMode() == google.maps.drawing.OverlayType.RECTANGLE) &&
(rectangle != null))
rectangle.setMap(null);
});
updated fiddle
code snippet:
/*
* declare map as a global variable
*/
var map;
var rectangle = null;
/*
* use google maps api built-in mechanism to attach dom events
*/
google.maps.event.addDomListener(window, "load", function() {
var mapOptions = {
center: new google.maps.LatLng(33.808678, -117.918921),
zoom: 4,
};
map = new google.maps.Map(document.getElementById('deviceControlMap'), mapOptions);
var drawingManager = new google.maps.drawing.DrawingManager({
// drawingMode: google.maps.drawing.OverlayType.RECTANGLE,
drawingControl: true,
drawingControlOptions: {
position: google.maps.ControlPosition.TOP_CENTER,
drawingModes: [
// google.maps.drawing.OverlayType.POLYGON,
google.maps.drawing.OverlayType.RECTANGLE
]
},
rectangleOptions: {
strokeWeight: 1,
clickable: true,
editable: false,
zIndex: 1
}
});
drawingManager.setMap(map);
google.maps.event.addListener(drawingManager, 'overlaycomplete', function(event) {
if (event.type == google.maps.drawing.OverlayType.RECTANGLE) {
if (rectangle != null)
rectangle.setMap(null);
rectangle = event.overlay;
var bounds = rectangle.getBounds();
console.log(bounds);
drawingManager.setDrawingMode(null);
}
});
google.maps.event.addListener(drawingManager, "drawingmode_changed", function() {
if ((drawingManager.getDrawingMode() == google.maps.drawing.OverlayType.RECTANGLE) &&
(rectangle != null))
rectangle.setMap(null);
});
// when the user clicks somewhere else on the map.
google.maps.event.addListener(map, 'click', function() {
if (rectangle != null)
rectangle.setMap(null);
});
});
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?libraries=drawing"></script>
<div id="deviceControlMap" style="height: 400px;"></div>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With