click event listener on styled map icons and labels

Question

Is it possible to add a listener for the click event on the icons and/or labels that appear for styled maps? I have a form that allows entry of Points of Interest. Since the poi styling shows icons and/or labels for many potential candidates, and clicking on one opens an infowindow with address info, etc, I would like to capture this address info to the fields on my form if the user clicks on one.

Answer 1

There is no API-based access to the POI's .

But there is a possible workaround.

When you click on a POI an InfoWindow opens. It's possible to modify the InfoWindow-prototype to be able to access the content of the InfoWindow without having a reference to the InfoWindow-instance.

      //store the original setContent-function
      var fx = google.maps.InfoWindow.prototype.setContent;

      //override the built-in setContent-method
      google.maps.InfoWindow.prototype.setContent = function (content) {
          //when argument is a node
          if (content.querySelector) {
              //search for the address
              var addr = content.querySelector('.gm-basicinfo .gm-addr');
              if (addr) {

                  alert(addr.textContent);
                  //leave the function here 
                  //when you don't want the InfoWindow to appear

              }
          }
          //run the original setContent-method
          fx.apply(this, arguments);
      };

Demo: http://jsfiddle.net/doktormolle/Vkf43/

Note: The selectors for the infowindow are not documented, they may change in the future

Answer 2

I realize this is an old Q, but this was recently fixed in Maps API. You can now listen for click events on map icons.

Starting with version 3.26 you should listen to the "click" event on the Map object. If the user clicks on a POI, a IconMouseEvent is raised. This class extends the Regular MouseEvent and contains a property called placeId. So you can check if the event object has defined placeId. The placeId field contains of course a Place Id, that you can use with Places API to get more info on the icon that was clicked. Calling stop() on the event itself will prevent Maps API from showing the default info window.

I prepared a small demo which demonstrates how to capture the click event and display your own info window.

http://jsbin.com/parapex/edit?html,output