Removing polygon from google maps drawingManager V3

google-maps-api-3, javascript, jquery

Solution

Examine this code, it sounds exactly like what you are talking about, a button to delete the shape

http://gmaps-samples-v3.googlecode.com/svn-history/r282/trunk/drawing/drawing-tools.html

Edit: above link is broken but I was able to find that code here.

  // globals
  var drawingManager;
  var selectedShape;

  ...

  function clearSelection() {
    if (selectedShape) {
      selectedShape.setEditable(false);
      selectedShape = null;
    }
  }

  function setSelection(shape) {
    clearSelection();
    selectedShape = shape;
    shape.setEditable(true);
    selectColor(shape.get('fillColor') || shape.get('strokeColor'));
  }

  function deleteSelectedShape() {
    if (selectedShape) {
      selectedShape.setMap(null);
    }
  }

     google.maps.event.addListener(drawingManager, 'overlaycomplete', function(e) {
        if (e.type != google.maps.drawing.OverlayType.MARKER) {
        // Switch back to non-drawing mode after drawing a shape.
        drawingManager.setDrawingMode(null);

        // Add an event listener that selects the newly-drawn shape when the user
        // mouses down on it.
        var newShape = e.overlay;
        newShape.type = e.type;
        google.maps.event.addListener(newShape, 'click', function() {
          setSelection(newShape);
        });
        setSelection(newShape);
      }
    });

    // Clear the current selection when the drawing mode is changed, or when the
    // map is clicked.
    google.maps.event.addListener(drawingManager, 'drawingmode_changed', clearSelection);
    google.maps.event.addListener(map, 'click', clearSelection);
    google.maps.event.addDomListener(document.getElementById('delete-button'), 'click', deleteSelectedShape);

    buildColorPalette();
  }

Problem

I have a user editable google map where users can draw an overlay polygon onto the map using the drawing manager. This works fine and the console logs the lat lngs I need. However, I need to add a button that will clear the map of the polygon so they can draw again if a mistake was made. My implementation code is pasted below: ``` geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(<?php echo $latitude ?>, <?php echo $longitude ?>); var myOptions = { zoom: <?php echo $zoomlevel ?>, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); marker = new google.maps.Marker({ map:map, draggable:true, animation: google.maps.Animation.DROP, position: latlng }) pos = marker.position; //alert(pos); document.getElementById("gpsite-surgery-latitude").value = pos.lat(); document.getElementById("gpsite-surgery-longitude").value = pos.lng(); google.maps.event.addListener(marker, "dragend", function() { var myLatLng = marker.latLng; pos = marker.position; //alert(pos); document.getElementById("gpsite-surgery-latitude").value = pos.lat(); document.getElementById("gpsite-surgery-longitude").value = pos.lng(); }) google.maps.event.addListener(map, 'zoom_changed', function() { document.getElementById("gpsite-surgery-zoomlevel").value = map.getZoom(); }); var drawingManager = new google.maps.drawing.DrawingManager({ drawingMode: google.maps.drawing.OverlayType.MARKER, drawingControl: true, drawingControlOptions: { position: google.maps.ControlPosition.TOP_CENTER, drawingModes: [google.maps.drawing.OverlayType.POLYGON] }, polygonOptions: { fillColor: '#ffff00', fillOpacity: 0.4, strokeWeight: 3, clickable: true, zIndex: 1, editable: false } }); google.maps.event.addListener(drawingManager, 'polygoncomplete', function (polygon) { var coordinates = (polygon.getPath().getArray()); console.log(coordinates); }); drawingManager.setMap(map); }); ``` There is also a marker on the map, you can ignore this.

Original source

Related problems