AngularJS: Event callback doesn't fire on google maps native map marker

Question

I've forked AngularUI's uiMap directive in order to swap InfoWindow for InfoBox and to add MarkerClusters. I've made some extensive updates to uiMap -> icMap; most notably I moved directive logic out of the controllers, making uiMap the "master" directive). I've got almost everything working, except that clicking a native MapMarker doesn't open the infobox.

I think the reason is that I'm not properly binding the click event to the native MapMarker (ic-map.js:163).

Before I re-organised uiMap I had simply added a icMapInfoBox directive in map.js. Its open event was registered/triggered by:

ui-event="{'map-click':'openMarkerInfo(marker)'}"

which called openMarkerInfo() defined in its controller (copy/paste from my repo: GitHub Gist).

However, now when I click a native MapMarker, nothing happens and I get no errors in the console (but all other events still fire properly).

Original Plunk
Simplified Plunk (removed MarkerClusters)
In both plunks, the problem probably lies in ic-map.js (first file in the list)

map.json is a data file
angular.js, angular-ui.js, and infobox.js are lib files

Edit I noticed that InfoBox.map is undefined; I'm guessing that has something to do with the problem.

Edit The undefined InfoBox.map property was part of the problem: The manual call to InfoBox.open on ic-map.js:189 works (template isn't being compiled, but that's a different problem), but the click event still doesn't trigger InfoBox.open. Also the template is not getting included.

SOLVED: I had been treating marker a DOM object instead of just a js object. Will post solution soon.

Answer 1

Working example: http://plnkr.co/edit/mamx5EXtHxSo4aqMSZUd

1. Original > ic-map.js:156 My event listener should have been bound with google.maps.event.addListener() (see Working Example > ic-map.js:154-156).
2. Also, it was too much trouble to use templates, so I added 2 divs as children of div#map (see Working Example > index.html:41-42). Due to how inheritence and shared models work, all of the directives MUST be on the same DOM element (because no-one can look down, only up). This was necessary for moving the directive logic out of the controller (as was the implementation from AngularUI). In my implementation, the model is shared across the icMaps* directives within the directives (and directive controllers).
3. Difference of marker:
   • uiMapMarker, marker is attached to a DOM object: ng-repeat="marker in markers"
   • icMapMarkers, marker is just a js object.

Answer 2

I believe you need to add jQuery as a dependency.

Undocumented jQuery dependency for uiMap

https://github.com/angular-ui/angular-ui/issues/552