delete node from a user created google maps polyline

Question

I need to allow users to create polylines on a google map and also allow them to delete a node between the polylines they created. The result of this removal should be a new polyline connecting the two new neighboring nodes. At the moment I'm struggling with allowing a user to delete a node. I've researched a bit and found a google reference and this SO question. Unfortunately, both of them assume that I have a reference to the polyline somewhere, which I don't, since the polyline is being created dynamically by the user.

This is the code that I currently use :

function initialize() {
    var mapOptions = {
        center: { lat: 45.797436, lng: 24.152044 },
        zoom: 12
    };
    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.POLYLINE
            ]
        },
        markerOptions: {
            icon: '/Mvc/Content/Styles/dropDownArrow.png'
        },
        polylineOptions: {
            editable: true,
        }
    });
    drawingManager.setMap(map);

    google.maps.event.addListener(drawingManager, 'markercomplete', markerCompleted);
    google.maps.event.addListener(drawingManager, 'polylinecomplete', polylineCompleted);

    function markerCompleted(marker) {
        var coordinates = { lng: marker.getPosition().lng(), lat: marker.getPosition().lat() };
        alert('The coordinates for the new marker are: lat:' + coordinates.lat + ', long: ' + coordinates.lng);
    }

    function polylineCompleted(polyline) {

    }
}

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

What I've tried is to map the polyline parameter inside the polylineCompleted event handler to a global variable, and then use the solution found in the SO link to somehow update the polyline, after which, using the getMap() and setMap() functions of the DrawingManager class, to update the map, but I got stuck. Is there any way of allowing a user to delete a polyline node, without having a reference to the polyline object?

Answer 1

Not sure this is what you are trying to achieve, but here is an example on how to let a user add and remove nodes from a polyline without using the drawingManager.

var map, polyline, markers = new Array();

function initialize() {

    var mapOptions = {
        zoom: 6,
        center: new google.maps.LatLng(20.291, 153.027),
        mapTypeId: google.maps.MapTypeId.TERRAIN
    };

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

    polyline = new google.maps.Polyline({
        strokeColor: 'red',
        strokeWeight: 1,
        map: map
    });

    google.maps.event.addListener(map, 'click', function (event) {

        addPoint(event.latLng);
    });
}

function removePoint(marker) {

    for (var i = 0; i < markers.length; i++) {

        if (markers[i] === marker) {

            markers[i].setMap(null);
            markers.splice(i, 1);

            polyline.getPath().removeAt(i);
        }
    }
}

function addPoint(latlng) {

    var marker = new google.maps.Marker({
        position: latlng,
        map: map
    });

    markers.push(marker);

    polyline.getPath().setAt(markers.length - 1, latlng);

    google.maps.event.addListener(marker, 'click', function (event) {

        removePoint(marker);
    });
}

initialize();

JSFiddle demo

Click on the map to add a point and click on a marker to remove a point.