Google Maps: clickable polyline icon

Question

I have two markers with a polyline connecting the two. I have click events on the markers and the polyline, but i was trying to make the polyline easier to click without placing a new marker or increasing it's strokeWeight. So I created a circular icon and placed on the polyline, but I can't make it clickable. Is it possible?

Saw this thread but doesn't give any specifics on how the icon is clickable. I searched it's code source but he adds a KML layer. I didn't want to do that. Google Maps: Attaching events on polyline icons

Searched the google maps overlay API but didn't find any interface to listen to click events. https://developers.google.com/maps/documentation/javascript/overlays#Polylines

I also tried to attach an event listener but didn't work. I suspect it can't be done without adding an actual marker or an object but if someone else had a similar problem i would appreciate any tips :)

Thanks in advance!

My code:

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 have a need for this functionality as well, but unfortunately it is not possible - I'm almost positive (see my demo). The reason I say so is because:

1. I've tried lots of different ways, but only the Polyline receives the event
2. It is not explicitly documented in Google's documentation

3. of what the following parts of the documentation implies:

   From the documentation on Symbols:

   A Symbol is a vector based image that can be displayed on either a Marker or a Polyline object.

   From the documenation on the AddEventListener:

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

   Adds the given listener function to the given event name for the given object instance. Returns an identifier for this listener that can be used with removeListener().

Events can be attached to Object instances (such as a Marker or Polyline). Since Symbols are vector-based images that are rendered on a Polyline, they are contained within it, and not officially Object instances. Apparently, this makes them ineligible to have events attached to themselves.

Now, what I'm still left in doubt is that my rational above implies that a Symbol is part of the Polyline meaning it should also receive the same events that were attached to the Polyline. However, in my trials, this isn't the case (demo here: regardless the size of the Symbol on a Polyline, it does not receive any events):

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!');
});