angular-ui / angular-google-maps

AngularJS directives for the Google Maps Javascript API

AngularUI - The companion suite for AngularJS

---

Usage

Requirements

• AngularJS v1.0.0+ is currently required.
• jQuery / Plugins (depends on directive). Check specific directive dependencies for more information

Installation

The repository comes with the modules pre-built and compressed into the build/ directory.

angular.module('myApp', ['ui']);

The modules can be found in the Directives and Filters folders. Check out the readme file associated with each module for specific module usage information.

Development

You do not need to build the project to use it - see above - but if you are working on it then this is what you need to know.

Requirements

0. Install Node.js and NPM (should come with)

1. Install local dependencies:

$ npm install

2. Install global dependencies grunt, coffee-script, and testacular:

$ npm install -g testacular coffee-script grunt

Build Files & Run Tests

Before you commit, always run grunt to build and test everything once.

$ grunt

Test & Develop

The modules come with unit tests that should be run on any changes and certainly before commiting changes to the project. The unit tests should also provide further insight into the usage of the modules.

First, start the testacular server:

$ grunt server

Then, open your browser to http://localhost:8080 and run the watch command to re-run tests on every save:

$ grunt watch

Publishing

For core team: if you wish to publish a new version follow these steps:

1. Bump the version number inside package.json
2. Build and test
3. Commit the updated package.json and build/ folder on their own commit
4. Tag the commit: git tag v[maj].[min].[patch]
5. Push the tag: git push [angular-ui] master --tags

angular-google-maps's Issues

Path or Directions support

Supporting paths by lat/long, possible to extend to directions with waypoints.

Custom click events

Is there a way to add custom click events to the map? I figure the easiest way would be to expose the PrivateMapModel instance to the scope, but I just wanted to check if there's already a way to do this that I haven't found.

Zoom Bar not displayed correctly

Using in an app with...
angular(1.0.7)
angular-resource(1.0.7)
angular-cookies(1.0.7)
angular-ui(0.4.0)
angular-ui-bootstrap(0.2.0)
angular-ui-router(0.0.1)

just displaying a static map, no bindings, the zoom bar appears garbled and is not usable (see image)

thanks

[master] [feature] Add ability to trigger info window remotely

It would be ideal to trigger a info window (thus simulating a click on the marker to open its info window) from a controller.

Currently the code only supports opening the infoWindow by clicking directly on it's markers.

Use Case:
Map showing locations with a list along side. User can click items in the list, and the map moves to that marker and opens its info window. ie: http://goo.gl/maps/SgeYK

Discussion
Some ideas for execution of the above

• Set a isOpen property on $scope.markers in your controller. Since angular-maps watches for changes in markers it would see when this property is toggled and could trigger the window accordingly. NOT ideal in my opinion.
• Add an attribute, ie: active-marker or active-marker-index which can be set on the directive element. When changed, the map would open the correct infoWindow. Could also be set to false to close all windows.

[ALL] ISSUE Guidance

On creating new issues please refer to which branch you are referring to.

IE:
Make your title start with:
[ALL] - meaning in general
[master]
[r1-dev]
..... etc

BEFORE submitting pull request please run grunt for JSLint errors. This will save time and catch bugs. TY.

[r1-dev] icon cannot be updated without the need to destroy a marker.. (Window design conflict)

My goal is to show only one open window at a time. Thus, having window.show bound to m.doShow (where m is the marker field doShow evals to true or false). I also tried using a parent scope via using doShow(maker) = function { self.active_marker.index === marker.index} . In any case both resulted to the $scope.watch of 'show()' always evaluating newValue and oldValue as equal. This appears to be a bug with angular itself.

See here.

angular/angular.js#2621

[r1-dev] Bug on pull #51 isIconVisibleOnClick needs to be local var

#51

I need to change this logic:

if (!angular.isDefined(attrs.isiconvisibleonclick)) {
                        scope.isIconVisibleOnClick = true;
 }

Angular barfs erros when you try to inject scope definitions if they are not defined. So isIconVisibleOnClick needs to be tracked as a local var instead. I will fix this.

Markers with a DROP animation don't appear after fit

I added a DROP animation to all added markers (simply at the point the Marker is created in the options). However, this leads to the problem that when a new marker is added to the markers array, it doesn't appear on the map. What happens is the map is fitted to the new bounds, but the new marker doesn't show.

The weird thing is, if I do any user action (like pan, zoom etc), the marker suddenly appears, complete with a DROP animation.

Without the DROP animation (as the master code is now), everything works fine.

Any idea what causes this behavior? It doesn't seem to be a google maps issue (see note1 below).

NOTE1: in a simple standard google maps usage (without angular), the problem doesn't reproduce.
NOTE2: I can reproduce this behavior with the library version from the download link (https://raw.github.com/nlaplante/angular-google-maps/master/src/angular-google-maps.js), having the single change to set the marker animation

Map center is not initialized correctly

When initializing the map with center coordinates the map shows the specified lat/lng at the top left corner instead.

You can see this by comparing the map from the demo page where initial center is lat/lng: 45, -73 and zoom level 4 and what is shown as Coordinates: 31.170, -43.556

to an equivalent on google maps https://maps.google.co.uk/maps?hl=en&ll=45,-73&z=4

[legacy]latitude, longitude DOM properties shows previous values on click events.

I'm using latitude, longitude DOM properties and click events as shown in the example code. But $scope.clickedLatitudeProperty and $scope.clickedLongitudeProperty are indicating old values instead of newly clicked values in click callback.

[master] Issue when adding multiple events to the event map

Having issues when adding multiple events to the eventProperty. After some debugging, I found that all events are correctly added to the _handlers property. However, when executing a handler function, the handler for the last function is all that fires.

For example, I have idle, dragend, and mouseout defined in my $scope's events. They all register events, but the handler for mouseout is fired on all events.

Spent a full morning and afternoon on this one, so any help is appreciated. Thanks!

ISSUE Guidance

On creating new issues please refer to which branch you are referring to.

IE:
Make your title start with:

[master]
[r1-dev]
..... etc

map is never drawn because !scope.hasOwnProperty('refresh') always returns true - AngularJS v1.0.4

It seems that angular adds a function for all & scopes
https://github.com/angular/angular.js/blob/49f9e4cef13e68ff85b3c160cf8fac6e7cd042a3/src/ng/compile.js#L765

so when we check to see if there is a refresh value, that's created here
https://github.com/nlaplante/angular-google-maps/blob/master/src/angular-google-maps.js#L309

it always returns true
https://github.com/nlaplante/angular-google-maps/blob/master/src/angular-google-maps.js#L418

If I change line 418 to
if (angular.isUndefined(scope.refresh())) {
It Works with both a defined refresh attribute and without it.

I'm quite new to angular, so I might be totally wrong, if so tell me :)

broken in IE9, trailing commas and maps API download issues

line 485 of angular-google-maps.js and line 27 of example-controller.js have trailing commas in an object definition (commas followed by "}") which break IE9.

fixing them helps but the map still never shows in IE9, apparently due to download issues with the Google Maps API?

[r1-dev] add scrollwheel option

Please include a way to set scrollwheel or MapOptions.
https://developers.google.com/maps/documentation/javascript/reference?hl=es-419#MapOptions

How to add additional/multiple markers to the map?

Convert markers to directive form

Convert markers from scope objects to full fledged directive to be used within a google-map directive

[r1-dev] Many Markers (few hundred) causes slow rendering

Not sure if this is the new GMap's V3 or angular's fault. But I have an old site that has the same amount of markers and the loading is much much faster. On this project it is slow. Hopefully this can be optimized.

Merge with AngularUI/ui-map or Make angular-google-maps organization

Hey there, this project seems to have a decent following, and I'm getting a bit overwhelmed maintaining all the different repos ourself. We broke the ui-map module apart from the rest of AngularUI, I was curious if you'd be interested in merging efforts?

Center binding

It would be useful to be able to bind lat & lng to variables in another object.

Eg:

position={
        timestamp:...,
        coords: {
                latitude: 0,
                longitude: 0,
                heading:0,
                ...,
}

With

center-lat="position.coords.latitude"
center-lng="position.coords.longitude"

Is there already a way to get this kind of two-way binding, or would this be a welcome change?

[r1-dev][feature] Possible convert to CoffeeScript

I personally am a huge fan of CoffeeScript and I was wondering if this project could be converted eventually. This would be a new branch completely. If you guys think it is not worth it then never-mind.

I just feel this would clean up the code and force safe javascript usage.

Understanding &refresh ?Question?

I am trying to force the map to redraw. Using your API what is the recommended way to tell your directive ti redraw the map?

[r1-dev] Window show appears to not function correctly

The example of:

 <window show="map.infoWindow.show" coords="map.infoWindow.coords" isIconVisibleOnClick="false">I should not be attached to a
             marker.</window>

map.infoWindow.show Is set to false should this not hide the marker?

Markers cannot be generated with some specific lat long positions

For example:
Lat: 33.934375
Lng: -84.352796

You can verify on the Try It demo page here: http://nlaplante.github.com/angular-google-maps/#!/usage

This lat/lng works on other google maps where I can either reverse geocode it( http://geocoder.ca/?reverse=1) or generate map markers (http://itouchmap.com/latlong.html)

Custom icons

I'm trying to implement custom icons.
Did you intend to use the url or thumbnail variables for this?
https://github.com/nlaplante/angular-google-maps/blob/master/src/angular-google-maps.js#L181
Right now they don't seem to do anything...

Integration with travis-ci

? Question? GoogleMap creation loading

Thanks for all your hard work! I wanted to verify that the code below on r1-dev is being called on google.maps.event.addDomListener( window, "load", ....) as suggested in the Google Maps SDK 3.

var _m = new google.maps.Map(el.find('div')[1], angular.extend({}, DEFAULTS, opts, {
   center: new google.maps.LatLng(scope.center.latitude,scope.center.longitude),
   draggable: isTrue(attrs.draggable),
   zoom: scope.zoom}));

The r1-dev version appears to be much snappier, but I I definitely noticed this flaw in the older version.

Sluggish drag on Firefox

Moving the map around in Firefox is very sluggish, unlike the official Google Maps site.

[all] Make good use of this wiki thing

https://github.com/nlaplante/angular-google-maps/wiki

It's there for a reason. Use it!

Fit map bounds not working when only one marker

        // Fit map when there are more than one marker. 
        // This will change the map center coordinates
        if (attrs.fit == "true" && newValue && newValue.length > 1) { //Needs to be >=
          _m.fit();
        }

//PS: Thanks for the lib, it helped a lot. Also I should really learn to use pull requests :)

[r1-dev] need to add in unit testing (jasmine?)

There is enough in the title, but r1-dev needs more verification then the example page.

Split directive and modules in separate files

Split module declaration and directive in separate files, allowing for easier addition of new directives

Current viewport bounds

Would be great if we can get the current viewport rectangle bounds data using the getBounds() method from the map object.

suggestion

Nice library :)

Just a suggestion, centerProperty uses lat/lng, but it would be nice to use
latitude/longitude to match up with position.coords in geolocations without further mapping

When using 2 maps, second map will not draw if refresh property is set.

I'm using Angular, AngularStrap, and Angular-google-maps. On my main page, I have a google map, that draws and refreshes properly. I pop up a modal, with a location picker, with a second map, if I set the refresh property does not draw. If I don't use the refresh property the second map is not centered properly, and it's only partially refreshed.

[Master] [develop]Using angular-google-maps with a promise

Thanks for your work on this library! It's making my Google Maps integration a lot easier.

I obtain my latitude and longitude via a promise, which works fine, except that I seem to need to initialize the center and zoom values when the page initially renders or else the map won't display even after the promise is fulfilled.

This is the way I'm using this now:

    $scope.mapCenter = { latitude: 0, longitude: 0 };
    $scope.mapZoom = 9;

    $scope.farm.then(function(farm) {
        if (angular.isDefined(farm.latitude) && angular.isDefined(farm.longitude)) {
            var marketCoord = { latitude: 43.074703, longitude: -76.167891 };
            var farmCoord = { latitude: farm.latitude, longitude: farm.longitude };
            angular.extend($scope, {
                mapCenter: marketCoord,
                mapMarkers: [ farmCoord ],
            });
        }
    });

<div class="map google-map" center="mapCenter" draggable="true" zoom="mapZoom"
markers="mapMarkers" mark-click="false" fit="true">
</div>

Is it possible to avoid initializing the center to bogus values?

[master][develop] Conditionally inject google maps script

It would be nice if you could conditionally load the google maps script tag when required rather than having to have the script tag in my index.html

RangeError: Maximum call stack size exceeded

I get this with the following default values:

    angular.extend($scope, {
      center: {
        lat: 45,
        lng: -73
      },
      zoom: 4,
      markers: []
    });

    <google-map center="center" draggable="true" zoom="zoom" markers="markers" mark-click="true" style="height: 400px"></google-map>

Marker won't update if only infowindow changed but not latLng.

https://github.com/nlaplante/angular-google-maps/blob/master/src/angular-google-maps.js#L480

I think we should add a updateMarker method if hasMarker is true.

get(0)

Angular's jqLite does not have a get method so the calls to angular.element.get fail.

[r1-dev] [blocker] ng-click inside infowindow not triggered

Hi Nicolas first of all thanks for the great work, been using the dev branch and it's really awesome.

Just one issue I've been struggling with: I can't get a ng-click on an element within an infowindow (as a directive within a marker directive within the map) to work. There's no error anywhere it just won't trigger.
This is weird cause it seems the content is compiled correctly by Angular as the databinding works inside that infowindow, and I've been able to use ng-show and others inside it.

I suspect google maps API is doing something funny with the click events and I've been able to use onclick="" and element.bind() but that's not really a satisfying solution.

I am not that much proficient with Angular directive so would you have any advice to try to fix this?

Cheers

Add attribute declaration support for the directive

Currently the returned directive restricts the markup to be either an entity or a class.

The two main reasons for attribute declaration are that it provides developers with another method to avoid custom entity declaration issues with certain versions of IE (http://docs.angularjs.org/guide/ie) and it would allow for HTML validation for those that care about that. A bonus is the current need to declare the css display type as block would be mitigated by using a div entity such as <div google-maps center="center" ...></div>.

Granted it is generally a stylistic preference for those who prefer attribute declaration vs. class declaration for directives and they share the same benefits over entity declarations, I would argue that unless there is a clear reason to not support attributes then it should be allowed for those who prefer that style.

Code change should be as simple as restrict: "EC", to restrict: "ECA",.

[r1-dev] Center goes nuts

Center property stutters and goes wonky. Not really sure how to explain this. But if you watch the Center coords on the page sometimes they start to go nuts. The numbers just keep spinning. So there seems to be some crazy loop causing center to change a ton.

[r1-dev] Setup Specs Framework

We need test specs to make this library testable. Discuss here which testing framework would best fit the bill.

Jasmine Setup:
grunt-contrib-jasmine

Goals:

Get a few initial specs up and working with the foundation of the grunt setup. Afterwards split up specs among the community or those that want to help.

Integrate testing framework

Karma? Jasmine?

[r1-dev] [master??] Redraw markers after filter

Hi,
Thanks for a great directive!
I'm not sure if this is the right forum for question, in that case let me know.

I'm using the search filter function that can be seen on angularjs.org (wire up a backend). I then use the filtered array to update my markers array.
I read about the refresh attribute, so that might be a solution. Is there an example where it's being used?

My question is, how do I redraw / refresh the map so that the markers are updated on the map?

Thanks in advance!

Any interest in merging with AngularUI?

We actually have a Google Maps directive already. I'm not sure if you're familiar with AngularUI.

It would be cool if we could merge efforts. We could add you to the team and we could try and merge the best practices from both solutions.

map isn't updated when markers property changes

Hi, I have a map specified as follows:

<div id="mapCanvas" center="center" zoom="zoom" markers="markers" mark-click="true" draggable="true" class="google-map ng-isolate-scope ng-scope angular-google-map" style="position: relative; background-color: rgb(229, 227, 223); overflow: hidden; -webkit-transform: translateZ(0);"></div>

and a controller like:

module.controller('MapCtrl', ['$scope', function ($scope) {
  angular.extend($scope, {
     center: { lat: 42.330571, lng: -83.039689 },
     zoom: 8,
     markers: []
  });

  $scope.$watch('selectedItem', function (newValue, oldValue) {
    if (newValue) {
      $scope.markers = [{latitude: 42.330571, longitude: -83.039689}];
    } else {
      $scope.markers.length = 0;
    }
    console.log($scope.markers);
  })
}]);

If I select an item in the UI, the watch function fires, and I set markers to be an array with a single lat/lng, and the map is updated to show the marker.

When I de-select the item, the watch function fires, and I truncate the length of the markers array (print array shows it is empty), but the map does not show the same -- the marker stays on the page, and I'm not sure why.

At first, I thought maybe I needed $scope.$apply, but if I use that within the $watch callback, it throws an error and says that $digest is already in progress.

Do you have any idea why the map seems to take new markers, but if I delete or truncate, it does not update the map?

Demo map shakes after drag/flick

On the main site -- http://nlaplante.github.com/angular-google-maps/ -- click on "Try it" to see the demo, and then click and drag the map, but also flick it, i.e. don't do a gentle click-drag, but try to give it some momentum. The map shakes back and forth. It seems the center keeps updating but never settling on a point unless you drag nice and slow.

angular-google-maps site doesn't load in IE10 due to cross origin script reference with wrong content type

Loading angular-google-maps.js from raw.github.com serves the script as text/plain and >= IE9 won't let it through.