Added mapTypeId to gmMap.

Author: dylanfprice

src/controllers/angulargmMapController.js

@@ -103,6 +103,21 @@
               this._map.fitBounds(bounds);
             }
           }
+        },
+
+        'mapTypeId': {
+          configurable: true, // for testing so we can mock
+          get: function() {
+            return this._map.getMapTypeId();
+          },
+          set: function(mapTypeId) {
+            if (mapTypeId == null)
+              throw 'mapTypeId was null or unknown';
+            var changed = this.mapTypeId !== mapTypeId;
+            if (changed) {
+              this._map.setMapTypeId(mapTypeId);
+            }
+          }
         }
       });
 

src/directives/gmMap.js

@@ -9,6 +9,7 @@
  *         gm-center="myCenter" 
  *         gm-zoom="myZoom" 
  *         gm-bounds="myBounds" 
+ *         gm-map-type-id="myMapTypeId"
  *         gm-map-options="myMapOptions">
  * </gm-map>
  * ```
@@ -27,18 +28,21 @@
  *   + `gm-bounds`: name for a bounds variable in the current scope.  Value will
  *   be a google.maps.LatLngBounds object.
  *
+ *   + `gm-map-type-id`: name for a mapTypeId variable in the current scope.
+ *   Value will be a string.
+ *
  *   + `gm-map-options`: object in the current scope that is a
  *   google.maps.MapOptions object. If unspecified, will use the values in
  *   angulargmDefaults.mapOptions. [angulargmDefaults]{@link module:angulargmDefaults}
  *   is a service, so it is both injectable and overrideable (using
  *   $provide.decorator).
  *
- * All attributes except `gm-map-options` are required. The `gm-center`, `gm-zoom`,
- * and `gm-bounds` variables do not have to exist in the current scope--they will
- * be created if necessary. All three have bi-directional association, i.e.
- * drag or zoom the map and they will update, update them and the map will
- * change.  However, any initial state of these three variables will be
- * ignored.
+ * All attributes except `gm-map-options` are required. The `gm-center`,
+ * `gm-zoom`, `gm-bounds`, and `gm-map-type-id` variables do not have to exist in
+ * the current scope--they will be created if necessary. All three have
+ * bi-directional association, i.e.  drag or zoom the map and they will update,
+ * update them and the map will change.  However, any initial state of these
+ * three variables will be ignored.
  *
  * If you need to get a handle on the google.maps.Map object, see
  * [angulargmContainer]{@link module:angulargmContainer}
@@ -85,6 +89,7 @@
       var hasCenter = false;
       var hasZoom = false;
       var hasBounds = false;
+      var hasMapTypeId = false;
 
       if (attrs.hasOwnProperty('gmCenter')) {
         hasCenter = true;
@@ -95,10 +100,13 @@
       if (attrs.hasOwnProperty('gmBounds')) {
         hasBounds = true;
       }
+      if (attrs.hasOwnProperty('gmMapTypeId')) {
+        hasMapTypeId = true;
+      }
 
       var updateScope = function() {
         $timeout(function () {
-          if (hasCenter || hasZoom || hasBounds) {
+          if (hasCenter || hasZoom || hasBounds || hasMapTypeId) {
             scope.$apply(function (s) {
               if (hasCenter) {
                 scope.gmCenter = controller.center;
@@ -112,6 +120,9 @@
                   scope.gmBounds = b;
                 }
               }
+              if (hasMapTypeId) {
+                scope.gmMapTypeId = controller.mapTypeId;
+              }
             });
           }
         });
@@ -121,6 +132,7 @@
       controller.addMapListener('zoom_changed', updateScope);
       controller.addMapListener('center_changed', updateScope);
       controller.addMapListener('bounds_changed', updateScope);
+      controller.addMapListener('maptypeid_changed', updateScope);
       controller.addMapListener('resize', updateScope);
 
       if (hasCenter) {
@@ -154,6 +166,15 @@
         });
       }
 
+      if (hasMapTypeId) {
+        scope.$watch('gmMapTypeId', function(newValue, oldValue) {
+          var changed = (newValue !== oldValue);
+          if (changed && newValue) {
+            controller.mapTypeId = newValue;
+          }
+        });
+      }
+
       scope.$on('gmMapResize', function(event, gmMapId) {
         if (scope.gmMapId() === gmMapId) {
           controller.mapTrigger('resize');
@@ -175,6 +196,7 @@
         gmCenter: '=',
         gmZoom: '=',
         gmBounds: '=',
+        gmMapTypeId: '=',
         gmMapOptions: '&',
         gmMapId: '&'
       },

test/unit/controllers/angulargmMapController.js

@@ -45,6 +45,7 @@ describe('angulargmMapController', function() {
     expect(mapCtrl.zoom).toEqual(1);
     var map = mapCntr.getMap(scope.gmMapId());
     expect(mapCtrl.bounds).toEqual(map.getBounds());
+    expect(mapCtrl.mapTypeId).toEqual(google.maps.MapTypeId.TERRAIN);
   });
 
 

test/unit/directives/gmMapSpec.js

@@ -11,13 +11,14 @@ describe('gmMap', function() {
 
   beforeEach(inject(function($rootScope, $compile, angulargmContainer, angulargmUtils) {
     // compile angulargm directive
-    elm = angular.element('<gm-map gm-map-id="mapId" gm-center="pCenter" gm-zoom="pZoom" gm-bounds="pBounds" gm-map-options="mapOptions">' +
+    elm = angular.element('<gm-map gm-map-id="mapId" gm-center="pCenter" gm-zoom="pZoom" gm-bounds="pBounds" gm-map-type-id="pMapTypeId" gm-map-options="mapOptions">' +
                           '</gm-map>');
 
     scope = $rootScope.$new();
     scope.mapOptions = {
       center: new google.maps.LatLng(1, 2),
-      zoom: 3
+      zoom: 3,
+      mapTypeId: google.maps.MapTypeId.TERRAIN
     }
     scope.mapId = 'test';
     $compile(elm)(scope);
@@ -31,6 +32,7 @@ describe('gmMap', function() {
       new google.maps.LatLng(4, 5),
       new google.maps.LatLng(6, 7)
     );
+    initMapTypeId = google.maps.MapTypeId.TERRAIN;
 
     // get MapController
     mapCtrl = elm.controller('gmMap');
@@ -49,11 +51,16 @@ describe('gmMap', function() {
         get: function() { return bounds;},
         set: function(newB) {bounds = newB;},
       },
+      'mapTypeId': {
+        get: function() { return mapTypeId;},
+        set: function(newM) {mapTypeId = newM;},
+      }
     });
 
     mapCtrl.center = initCenter;
     mapCtrl.zoom = initZoom;
     mapCtrl.bounds = initBounds;
+    mapCtrl.mapTypeId = initMapTypeId;
   }));
 
 
@@ -99,6 +106,7 @@ describe('gmMap', function() {
     expect(scope.pCenter).toEqual(initCenter);
     expect(scope.pZoom).toEqual(initZoom);
     expect(scope.pBounds).toEqual(initBounds);
+    expect(scope.pMapTypeId).toEqual(initMapTypeId);
   }));
 
 
@@ -109,13 +117,15 @@ describe('gmMap', function() {
       southWest: {lat: 11, lng: 12},
       northEast: {lat: 13, lng: 14}
     };
+    scope.pMapTypeId = 'wut';
 
     google.maps.event.trigger(map, 'bounds_changed');
     $timeout.flush();
 
     expect(scope.pCenter).not.toEqual(initCenter);
     expect(scope.pZoom).not.toEqual(initZoom);
     expect(scope.pBounds).not.toEqual(initBounds);
+    expect(scope.pMapTypeId).not.toEqual(initMapTypeId);
   }));
 
 
@@ -190,10 +200,12 @@ describe('gmMap', function() {
     scope.pCenter = null;
     scope.pZoom = null;
     scope.pBounds = null;
+    scope.pMapTypeId = null;
     scope.$digest();
     expect(mapCtrl.center).not.toEqual(null);
     expect(mapCtrl.zoom).not.toEqual(null);
     expect(mapCtrl.bounds).not.toEqual(null);
+    expect(mapCtrl.mapTypeId).not.toEqual(null);
   });