10

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: clicking the 'ZOO' place pops up the balloon, but does not give the address in the search box, because no click event was received

vicmortelmans
  • 616
  • 6
  • 16

2 Answers2

15

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/

Community
  • 1
  • 1
Dr.Molle
  • 116,463
  • 16
  • 195
  • 201
  • Thanks, this workaround works very well. The only downside in the context of the geocoding demo used above, is that the geocoded address of the POI's location doesn't always match the official address of the POI as listed in the balloon. I'm going to try making another roundtrip via the Google Maps API Places Library to fetch this info... – vicmortelmans Jun 16 '14 at 10:40
  • 1
    To get the details(address) from the balloon see http://stackoverflow.com/questions/21486868/click-event-listener-on-styled-map-icons-and-labels/21488643#21488643 – Dr.Molle Jun 16 '14 at 11:03
  • Gotta love code you can just drop in place, and it works – NinjaKC Mar 06 '15 at 00:33
  • I found this no longer works in version 3.20 if you use the signed_in param – Ben_hawk Apr 13 '15 at 16:36
  • @Ben_hawk: It doesn't seem to be affected by the API-version, for me it works(without `signed_in`), regardless of the version. – Dr.Molle Apr 13 '15 at 17:01
  • Ah yep your right, just singed_in that affects it. Anyone know a work around other than removing singed_in? – Ben_hawk Apr 13 '15 at 17:19
  • Currently there is nothing to do(at least nothing that is related to the original question). When you click on a POI in a signed_in map the click-event of the map will be triggered automatically(that's what the original question is about) – Dr.Molle Apr 13 '15 at 18:13
  • New (2016): In API version 3.24+, you can use clickableIcons. See documentation here. https://developers.google.com/maps/documentation/javascript/3.exp/reference#MapOptions – daphshez Jul 10 '16 at 16:27
7

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).

Wolf Bergenheim
  • 416
  • 5
  • 7