Google Maps: interactive polyline icon

Question

I have two markers with a polyline connecting the two. I click events on markers and polylines, but I tried to make the polyline easier by clicking without placing a new marker or increasing its strokeWeight. So I created a circular icon and placed it on the polyline, but I cannot make it interactive. Is it possible?

Saw this thread, but gives no details on how the icon can be clicked. I searched for its source code, but it adds a KML layer. I did not want to do this. Google Maps: binding events to polyline icons

Searched the Google Maps Overlay API, but found no interface to listen for click events. https://developers.google.com/maps/documentation/javascript/overlays#Polylines

I also tried connecting an event listener, but it did not work. I suspect that this cannot be done without adding the actual marker or object, but if anyone had a similar problem, I would appreciate any advice :)

Thanks in advance!

My code is:

var pathSymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 8,
    strokeColor: '#228B22'
};

var conPath = new google.maps.Polyline({
    path: conCoord,
        strokeColor: "#228B22",
        strokeOpacity: 0.7,
        icons: [{
            icon: pathSymbol,
            offset: '50%'
        }],
        strokeWeight: 2
});

conPath.setMap(map);


google.maps.event.addListener(conPath, 'click', (function(l,conCoord) {
    return function() {
            infowindowPath.setContent("<b>Ligação "+connections[l].id);
        infowindowPath.setPosition(new google.maps.LatLngBounds(conCoord[1], conCoord[0]).getCenter());
            infowindowPath.open(map);
        }
})(l,conCoord));

Answer 1

I also need this functionality, but, unfortunately, this is not possible - I'm almost sure (see my demo ). The reason I'm talking is this:

• I tried many different ways, but only the polyline gets the event
• This is not listed in the Google documentation.

• which is implied in the following parts of the documentation:

  :

  A - , .

  documenation AddEventListener:

  addListener(instance:Object, eventName:string, handler:Function)

  . , removeListener().

(, ). , , , . -, .

, , , , . ( : Polyline, ):

var mySymbol = {
    path: google.maps.SymbolPath.CIRCLE,
    scale: 25,
    strokeWeight: 5,
    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!');
});