Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to remove previous shape when drawing new shape is started on Google Map

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.

like image 577
séan35 Avatar asked May 20 '15 07:05

séan35


People also ask

How do I remove a shape from Google Maps?

Select the items in the Places panel and use the delete key on the keyboard, or right click and delete.

Can you draw polygons on Google Maps?

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.


1 Answers

One option:

  1. set the drawing mode to null on rectanglecomplete
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);
    }
});
  1. remove the rectangle when it is changed back to RECTANGLE
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>
like image 79
geocodezip Avatar answered Oct 20 '22 15:10

geocodezip