Maps API v3 set and remove polyline points

http://stackoverflow.com/questions/31052749

by Ismail Ibraheem Shurrab

HTML

<script src="https://maps.googleapis.com/maps/api/js?&amp;sensor=false"></script>
<div id="map-canvas"></div>

CSS

#map-canvas {
    height: 400px;
}

JavaScript

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();