How to get a click event when a user clicks a (business) place on the map

I know how to set a click event on a map, and it works fine when clicking random locations. But when I click a business place, Google Maps will display the balloon containing the information about the business, but not raise the click event to my JavaScript.

You can see this happing on this geocoding demo (http://rjshade.com/projects/gmaps-autocomplete/). Browse the map to some city and click a random location: the address is displayed in the text box (Hurray!). Now find some business place and click that: the map pops up the balloon, but no click event is sent to the JavaScript to update the text box. Ironically: the required address info is available in the balloon!

How to handle click events on business places in Google maps?

Screenshot:

Solution 1:

Editor's note: this answer was applicable until version 3.23. Since version 3.24 released in 2016, you can use clickableIcons map option. See this answer.

Basically there is no option to handle clicks on the POI's.

Of course you can simply hide these features via styles, but when you want to keep them visible on the map, here's a workaround(based on: click event listener on styled map icons and labels):

When you click a POI an InfoWindow opens, that's where you may get access.

Override the setPosition-method of the InfoWindow-prototype so that it triggers a click on the map.

//keep a reference to the original setPosition-function
var fx = google.maps.InfoWindow.prototype.setPosition;

//override the built-in setPosition-method
google.maps.InfoWindow.prototype.setPosition = function () {

  //logAsInternal isn't documented, but as it seems
  //it's only defined for InfoWindows opened on POI's
  if (this.logAsInternal) {
    google.maps.event.addListenerOnce(this, 'map_changed',function () {
      var map = this.getMap();
      //the infoWindow will be opened, usually after a click on a POI
      if (map) {
        //trigger the click
        google.maps.event.trigger(map, 'click', {latLng: this.getPosition()});
      }
    });
  }
  //call the original setPosition-method
  fx.apply(this, arguments);
};

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

Solution 2:

This is issue #4797 tracked in the Google Maps API issue tracker, and was recently fixed, and available in version 3.26.

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.

I prepared a small demo: http://jsbin.com/parapex/10/edit?html,output

When you click on the map the handleClick method of the ClickHandler object is triggered. You can see it check for the placeId. And then it routes to the place (using the placeId) and finally uses the Places Service in Maps API to get information about the place (in this case the name, an icon and the address).