Polymer, how to open/close google-map-marker InfoWindow?

Question

I'm using the webcomponent google-map-marker in a Polymer element created by me. I want to catch the click on it to do something afterwords in my component, so I tried this on my template:

<div horizontal layout flex style="height: 400px;">
  <div class="panel-contents" vertical layout flex>
    <google-map flex  map="{{map1}}" latitude="45.5601451" longitude="-73.7120832">
       <google-map-marker latitude="45.5601451" longitude="-73.7120832"  map="{{map1}}" clickEvents="true" google-map-marker-click="{{markerClicked}}" ></google-map-marker>
    </google-map>
  </div>
</div>

and in the script part

Polymer({
  markerClicked: function () {
    //this is never triggered!
  },

});

Is there a way of doing this? Thanks in advance.

PS: Btw, what I originally wanted to do was close all the other markers InfoWindow if they are visible, before showing the one of the just clicked marker. If someone has an idea of a better workaround for it, that would be awesome.

Answer 1

You are missing one "on-" in calling the function, right way would be:

on-google-map-marker-click="{{markerClicked}}"

This is called Declarative event mapping: [1], [2]

..

Here is how markers infoWindows are opened or closed using Maps API:

markerClicked: function(e, detail, sender) {

          console.log('google_map_marker_click');

          /////////////////////////////////////
          //Seting marker infowindow to be open by default using it's API
          //
          //Select the map and the marker:
          // var map_marker_1 =  this.$.map_marker_1;
          // var google_map = this.$.map_1;
          //Open the info:
          // google_map_marker.info.open(google_map.map, google_map_marker.marker);
          /////////////////////////////////////

          /////////////////////////////////////
          //Closing marker infowindow
          //
          //console.log(sender.tagName);
          //console.log(sender.info);//marker's info object
          //console.log(sender.info.content);

          //or select the marker by id:
          //var map_marker_1 =  this.$.map_marker_1;

          //this is closing marker infowindow
          sender.info.close();
          //or 
          // map_marker_1.info.close();
          /////////////////////////////////////

        },

Here is example Plunk

Answer 2

Updates to Goce Ribeski's answer in 1.0:

• clickEvents should now be click-events. camelCase translates to attributes with dashes
• Curly brackets are removed from event listeners.

I.e. click-events="true" on-google-map-marker-click="markerClicked"