Google Maps - Polyline Symbol events

http://stackoverflow.com/questions/15968898/google-maps-clickable-polyline-icon/16540858#16540858

HTML

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<div id="map"></div>

CSS

#map { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

JavaScript

window.addEventListener('load', function() {
    var polylineCenter = new google.maps.LatLng(0, 0);
    var polylineEnd = new google.maps.LatLng(30, -30);

    var myMap = new google.maps.Map(document.getElementById('map'), {
		zoom: 2,
		center: polylineCenter,
        mapTypeId: 'roadmap'
	});

    var mySymbol = {
        path: google.maps.SymbolPath.CIRCLE,
        scale: 25,
        strokeColor: 'blue',
        strokeWeight: 5,
        fillColor: 'blue',
        fillOpacity: .2
    };

    var myPolyline = new google.maps.Polyline({
        icons: [{
            icon: mySymbol,
            fixedRotation: true,
            offset: '50%',
        }],
        path: [polylineCenter, polylineEnd],
        strokeColor: 'black',
        strokeOpacity: 1,
        strokeWeight: 5,
        map: myMap
    });

    // works since <myPolyline> is an instance of an Object
    google.maps.event.addListener(myPolyline, 'click', function() {
        alert('Polyline clicked!');
    });

    // doesn't work :-( since <mySymbol> is an Object literal
    google.maps.event.addListener(mySymbol, 'click', function() {
        alert('Symbol clicked!');
    });
});