5

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.

Jakob Jingleheimer
  • 30,952
  • 27
  • 76
  • 126
  • Please provide a jsFiddle with all files. – tschiela Apr 22 '13 at 18:40
  • @tschiela, I already provided a Plunkr with all files (it's linked at the bottom of the question). Plunkr seems a little slow today, so it takes a few seconds to load. – Jakob Jingleheimer Apr 22 '13 at 18:47
  • oh sorry i slipped that link. thx – tschiela Apr 22 '13 at 19:10
  • @tschiela, np. I'll bold it so it's more noticeable. – Jakob Jingleheimer Apr 22 '13 at 19:14
  • that is to many code to overview. takes some time to get an overview. may you can break down the code and provide a such smaller plunkr. Often the problem is the asynchronous way of JavaScript. Events would be bindet to markers, but the markers not loaded at these moment. So check all callbacks. Also i get many errors in the chrome web developer console. Fix them first – tschiela Apr 22 '13 at 19:55
  • @tschiela, if you're referring to the numerous `Uncaught Error: QuotaExceededError: DOM Exception 22` errors, I think those are from Plunker, not me. Also, I took out code for MarkerClusterer (updated my question with a new link), but beyond that, I think everything else is required to adequately simulate my environment. I don't think it's a problem caused by asynchronicity—that should cause an `undefined` error, no? I think the event binding should occur in addMarkers() of _ic-map.js:157_ (called on line 185). – Jakob Jingleheimer Apr 22 '13 at 21:26

2 Answers2

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.
Jakob Jingleheimer
  • 30,952
  • 27
  • 76
  • 126
0

I believe you need to add jQuery as a dependency.

Undocumented jQuery dependency for uiMap

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

wbyoko
  • 1
  • 1