4

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.

user3258359
  • 41
  • 2
  • possible duplicate of [Customize default InfoWindow in Google Maps API v3](http://stackoverflow.com/questions/9050427/customize-default-infowindow-in-google-maps-api-v3) – Dr.Molle Jan 31 '14 at 18:05

2 Answers2

8

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

Dr.Molle
  • 116,463
  • 16
  • 195
  • 201
  • How about points of interest without an infowindow (e.g. subway stations in Paris?) –  May 06 '15 at 13:58
  • 1
    You can use this same trick for the transit windows. They just have a different content and you need to adapt the code to that. Their content starts with
    . To get the full information, try adding a console.log(content); as the first line in the altered setContent function proposed by @dr-molle
     – Sverrir Sigmundarson Aug 09 '15 at 14:13
4

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

Wolf Bergenheim
  • 416
  • 5
  • 7