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.

Improve this question
6
  • Please provide a jsFiddle with all files. Commented Apr 22, 2013 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. Commented Apr 22, 2013 at 18:47
  • oh sorry i slipped that link. thx Commented Apr 22, 2013 at 19:10
  • @tschiela, np. I'll bold it so it's more noticeable. Commented Apr 22, 2013 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 Commented Apr 22, 2013 at 19:55

2 Answers 2

Reset to default
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.
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

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

Improve this answer

1 Comment

Thank you, but that was not the problem.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.