angular-ui
Support infobubble
Since google maps infowindow has a very limited set of customizations infobubble was created. https://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries
Would be awesome if support for this was added.
I would love to contribute, a bit of a beginner when it comes angular and js so would need a some pointers
Alright, so I got this working yesterday. Since it expands on the infoWindow, it supports the same events and options and acts the same way as the regular infoWindow.
Just by copying the directive for uiInfoWindow I was able to get it working.
I could make a pull request, for this, but it takes a dependency on InfoBubble, so don't know if that would break things.
Thanks for any feedback!
Hi Dashue,
Good work! Sorry for not responding earlier. So is InfoBubble a seperate file dependency from InfoWindow?
As long as it doesn't error if the user doesn't want to use infobubble, it should be fine.
Yes it is. Should the user have to include this if they want to use it or should the directive be smart enough to feature detect it and take care of it's dependency if it's needed?
I will try to pull the source and create a pull request for the infobubble this weekend
Sounds good!
The directive should just error if the user tries to use it without infobubble dependency downloaded. But it should come bundled with ui-map, I think.
Having trouble getting it to run. Do you understand any of this?
PS F:\dev\ui-map> grunt Running "jshint:files" (jshint) task
4 files lint free.
Running "karma:unit" (karma) task INFO [karma]: Karma server started at http://localhost:9876/ INFO [launcher]: Starting browser Chrome INFO [launcher]: Starting browser Firefox INFO [launcher]: Starting browser PhantomJS Fatal error: spawn ENOENT PS F:\dev\ui-map> grunt server Warning: Task "server" not found. Use --force to continue.
Aborted due to warnings.
Sucks to be you right now lol.
Have you tried 'npm install phantomjs -g'?
if it still doesn't work after that try just pushing your code anyway and I'll take a peak.
Andy Joslin from my mobile
On Sat, Jun 1, 2013 at 5:05 PM, Johan Nilsson [email protected] wrote:
Having trouble getting it to run. Do you understand any of this? PS F:\dev\ui-map> grunt Running "jshint:files" (jshint) task
4 files lint free. Running "karma:unit" (karma) task INFO [karma]: Karma server started at http://localhost:9876/ INFO [launcher]: Starting browser Chrome INFO [launcher]: Starting browser Firefox INFO [launcher]: Starting browser PhantomJS Fatal error: spawn ENOENT PS F:\dev\ui-map> grunt server Warning: Task "server" not found. Use --force to continue.
Aborted due to warnings.
Reply to this email directly or view it on GitHub: https://github.com/angular-ui/ui-map/issues/5#issuecomment-18796970
It actually did pull down phantomjs, im impressed (running on windows). But alas, still the same problem.
The only thing i´ve added is the following, and i´m currently running it on my site without any hiccups so far:
app.directive('uiMapInfoBubble', ['ui.config', '$parse', '$compile', function (uiConfig, $parse, $compile) {
var infoBubbleEvents = 'closeclick content_change domready ' +
'position_changed zindex_changed';
var options = uiConfig.mapInfoBubble || {};
window.infoBubbleOptions = options;
return {
link: function (scope, elm, attrs) {
var opts = angular.extend({}, options, scope.$eval(attrs.uiOptions));
opts.content = elm[0];
var model = $parse(attrs.uiMapInfoBubble);
var infoBubble = model(scope);
window.infoBubbleOptions = opts;
if (!infoBubble) {
infoBubble = new InfoBubble(opts);
model.assign(scope, infoBubble);
}
bindMapEvents(scope, infoBubbleEvents, infoBubble, elm);
/* The info window's contents dont' need to be on the dom anymore,
google maps has them stored. So we just replace the infowindow element
with an empty div. (we don't just straight remove it from the dom because
straight removing things from the dom can mess up angular) */
elm.replaceWith('<div></div>');
//Decorate infoWindow.open to $compile contents before opening
var _open = infoBubble.open;
infoBubble.open = function open(a1, a2, a3, a4, a5, a6) {
$compile(elm.contents())(scope);
_open.call(infoBubble, a1, a2, a3, a4, a5, a6);
};
}
};
}]);
Just gave it another try: PS F:\dev\ui-map> grunt Running "jshint:files" (jshint) task
4 files lint free.
Running "karma:unit" (karma) task INFO [karma]: Karma server started at http://localhost:9876/ INFO [launcher]: Starting browser IE WARN [watcher]: Pattern "F:/dev/ui-map/components/angular/angular.js" does not match any file. WARN [watcher]: Pattern "F:/dev/ui-map/components/angular-mocks/angular-mocks.js" does not match any file. WARN [watcher]: Pattern "F:/dev/ui-map/components/angular-ui-utils/modules/event/event.js" does not match any file. INFO [IE 10.0 (Windows)]: Connected on socket id KBeNgzSSwjyRlH_DrrkT IE 10.0 (Windows) ERROR 'angular' is undefined at F:/dev/ui-map/ui-map.js:2 IE 10.0 (Windows): Executed 0 of 0 ERROR (0.043 secs / 0 secs) Warning: Task "karma:unit" failed. Use --force to continue.
Aborted due to warnings.
Anything that pops out? I don´t seem to have a components folder, who creates that?
I'm currently experiencing the same problem of @Dashue during installation too.
Running "jshint:files" (jshint) task
4 files lint free.
Running "karma:unit" (karma) task INFO [karma]: Karma server started at http://localhost:9876/ INFO [launcher]: Starting browser Chrome INFO [launcher]: Starting browser Firefox INFO [launcher]: Starting browser PhantomJS Fatal error: spawn ENOENT
Please let me know if you make any progress on this. Really too bad that we can't contribute :/
Bump, would really like to contribute this so as to standardize the logic being used. And possibly add on it, instead of just adding changes locally that other people won't be able to leverage