angular-ui-map doesnt play well with angular-ui-router.

README.md

@@ -56,6 +56,13 @@ To see something it's better to add some CSS, like
 .map-canvas { height: 400px; }
 ```
 
+To delay the map construction until the page is visible, you can set the optional *ui-map-load-event* attribute.  Here I have delayed google map construction until the ui-router's $viewContentLoaded event has been fired.  This is required when using this component with ui-router.
+
+```html
+<section id="map" ng-controller="MapCtrl" >
+  <div ui-map="myMap" ui-options="mapOptions" ui-map-load-event="$viewContentLoaded"></div>
+</section>
+```
 ## Options
 
 [google.maps.MapOptions object](https://developers.google.com/maps/documentation/javascript/reference#MapOptions) can be passed through the main directive attribute`ui-map`.

src/ui-map.js

@@ -32,14 +32,30 @@
         restrict: 'A',
         //doesn't work as E for unknown reason
         link: function (scope, elm, attrs) {
-          var opts = angular.extend({}, options, scope.$eval(attrs.uiOptions));
-          var map = new window.google.maps.Map(elm[0], opts);
-          var model = $parse(attrs.uiMap);
+          // this function will display the map
+          var displayMap =  function() {
+              var opts = angular.extend({}, options, scope.$eval(attrs.uiOptions));
+              var map = new window.google.maps.Map(elm[0], opts);
+              var model = $parse(attrs.uiMap);
+
+              //Set scope variable for the map
+              model.assign(scope, map);
 
-          //Set scope variable for the map
-          model.assign(scope, map);
+              bindMapEvents(scope, mapEvents, map, elm);
+              scope.$emit('ui-map-loaded');
+          };
 
-          bindMapEvents(scope, mapEvents, map, elm);
+          // retrieve the optional ui-map-load-event:
+          // this is to delay the construction of the map until the div containing
+          // it is visible.  In the case of angular-ui-router, this event can be
+          // set to "$viewContentLoaded"
+          var mapLoadEvent = attrs.uiMapLoadEvent;
+          if(mapLoadEvent){
+              scope.$on(mapLoadEvent, displayMap);
+          } else {
+              displayMap();
+          }
+
         }
       };
     }]);