Google-map-marker: Listeners don't work on contents

[tst-dhudlow]

Consider the following markup:

    <template is="dom-repeat" items="{{searchResults}}">
      <google-map-marker map="{{map}}"
                         latitude="{{item.latitude}}"
                         longitude="{{item.longitude}}"
                         title="{{item.name}}">
        <h2>{{item.name}}</h2>
        <span>{{item.formatted_address}}</span>
        /* NOTICE: on-click event */
        <button raised on-click='addToList'>Add</button>
      </google-map-marker>
    </template>

You would expect this to call the 'addToList' method in the current Polymer element, but it doesn't. The reason is that the DOM element actually tied to the event is still sitting under the google-map-marker tag and has been copied into the balloon as HTML text.

[lbustelo]

I had to modify the mutation observer in google-map-marker to listen to character data to get some of it to work.

https://github.com/lbustelo/google-map-observe/blob/ObserveNodesMarkers/google-map-marker.html#L330

[mlisook]

I think this is a very important issue to resolve and I'll continue to follow this issue and the 294 pull request.

In the interim, I've created an element to emulate the infowindow, paper-map-info, that supports full composability including listeners. It could be of value to others needing this functionality.

[thexs-dev]

@mlisook thanks for sharing your solution
Is there a way for instead of emulating the Infowindow, just use the standard google.maps.InfoWindow() and set the content on marker click, associated with a paper-card element?

[mlisook]

@Fausto-theXS that is the approach I started with, but after lots of work and research, I'm sad to say the answer is no, not really. At least not in a way that's going to work completely under native shadow dom.

The setContent(element) function moves the elements to a position inside div#map inside google-map. It's placing them in the shadow dom, an area that is by design encapsulated from the rest of the dom tree. Style classes, for example can't affect them.

Even in shady dom, there are all kinds of fiddly edge cases that have to be handled.

[jonadeline]

FYI I also developed an element (based on @mlisook plastic-map-info) to help building a customizable google map infowindow.
It's called custom-gmap-infowindow. Do not hesitate to contribute.