CODEWITHSUNDEEP
google-maps
Jossez
Jossez

Reputation: 35

How to remove markers in Drawing Manager

i wanna know how i can remove a marker with a button if possible. I know how to do it without drawing manager,but i need drawing manager and i don't know how to work with him This is the code (just a example):

<!DOCTYPE html>
<html>
  <head>
    <title>Drawing tools</title>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=drawing"></script>
    <script>
function initialize() {
  var mapOptions = {
    center: new google.maps.LatLng(40.60033,-7.753715),
    zoom: 18
  };

  var map = new google.maps.Map(document.getElementById('map-canvas'),
    mapOptions);

  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.MARKER,
        google.maps.drawing.OverlayType.POLYGON
             ]
    },
    markerOptions: {
      title: 'Hello'
    },
    circleOptions: {
      fillColor: '#ffff00',
      fillOpacity: 1,
      strokeWeight: 5,
      clickable: false,
      editable: true,
      zIndex: 1
    }
  });
  drawingManager.setMap(map);
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

Upvotes: 1

Views: 3659

Answers (2)

user4050612
user4050612

Reputation: 21

First, when you create function for markercomplete you must call the function DeleteShapesGoogleMaps, and send parameter the shape (marker) for this case.

Second, within the DeleteShapesGoogleMaps() function , delete the markers, or any shape that you created before, and then create the new controls of Drawingmanager

    google.maps.event.addListener(drawingManager, 'markercomplete', function (marker) {
        marker.setOptions({
            draggable: true
        });            
        google.maps.event.addListener(marker, 'dragend', function () {  
            // Put your code here when marker finish event drangend Example get LatLang 
            /*
                var objLatLng = marker.getPosition().toString().replace("(", "").replace(")", "").split(',');
                Lat = objLatLng[0];
                Lat = Lat.toString().replace(/(\.\d{1,5})\d*$/, "$1");// Set 5 Digits after comma
                Lng = objLatLng[1];
                Lng = Lng.toString().replace(/(\.\d{1,5})\d*$/, "$1");// Set 5 Digits after comma

            */
        });
        drawingManager.setOptions({ drawingControl: false });
        drawingManager.setDrawingMode(null);
        DeleteShapesGoogleMaps(marker);
    });// End markercomplete






function DeleteShapesGoogleMaps(shape) {
    google.maps.event.addListener(shape, 'click', function () {
        shape.setMap(null);
        drawingManager.setOptions({
            drawingControl: true,
            drawingControlOptions: {
                position: google.maps.ControlPosition.TOP_CENTER,
                drawingModes: [
                    google.maps.drawing.OverlayType.CIRCLE,
                    google.maps.drawing.OverlayType.POLYGON,
                    google.maps.drawing.OverlayType.MARKER
                ]
            }
        });

    }
}

Upvotes: 2

Anto Jurković
Anto Jurković

Reputation: 11258

You can use event markercomplete event, pick up marker reference and remove it. For example:

  google.maps.event.addListener(drawingManager, 'markercomplete', function(e) {
    console.log(e);
    setTimeout(function() {
        console.log('remove marker');
        e.setMap(null);
    }, 5000);

  });

See Google ref. docs about DrawingManager - events.

Upvotes: 1

Related Questions