how to change polyline color by clicking on it?

Question

i am using drawnig tools provided by google maps api, and i want after drawnig the polyline, to change its color by clicking on it this is my code

function initialize() {
    var mapOptions = {
        center: new google.maps.LatLng(-34.397, 150.644),
        zoom: 8
    };

    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: 'images/beachflag.png'
        },
        circleOptions: {
            fillColor: '#ffff00',
            fillOpacity: 1,
            strokeWeight: 5,
            clickable: true,
            zIndex: 1
        }
    });

    drawingManager.setMap(map);
}

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

Answer 1

You have to add listener for event polylinecomplete inside initialize() function and define click event listener, for example:

google.maps.event.addListener(drawingManager, 'polylinecomplete', function(polyline) {
    google.maps.event.addListener(polyline, 'click', function() {
        polyline.setOptions({strokeColor: '#FF0000'});
    });
});