feat(SebmGoogleMaps): support styles

You can style your map with the new [styles] input.

Closes #387

src/core/directives/google-map.ts

@@ -3,6 +3,7 @@ import {Component, ElementRef, EventEmitter, OnChanges, OnInit, SimpleChange} fr
 import {MouseEvent} from '../events';
 import {GoogleMapsAPIWrapper} from '../services/google-maps-api-wrapper';
 import {LatLng, LatLngLiteral} from '../services/google-maps-types';
+import {MapTypeStyle} from '../services/google-maps-types';
 import {InfoWindowManager} from '../services/info-window-manager';
 import {MarkerManager} from '../services/marker-manager';
 
@@ -36,7 +37,8 @@ import {MarkerManager} from '../services/marker-manager';
  providers: [GoogleMapsAPIWrapper, MarkerManager, InfoWindowManager],
  inputs: [
  'longitude', 'latitude', 'zoom', 'disableDoubleClickZoom', 'disableDefaultUI', 'scrollwheel',
- 'backgroundColor', 'draggableCursor', 'draggingCursor', 'keyboardShortcuts', 'zoomControl'
+ 'backgroundColor', 'draggableCursor', 'draggingCursor', 'keyboardShortcuts', 'zoomControl',
+ 'styles'
  ],
  outputs: ['mapClick', 'mapRightClick', 'mapDblClick', 'centerChange'],
  host: {'[class.sebm-google-map-container]': 'true'},
@@ -110,12 +112,18 @@ export class SebmGoogleMap implements OnChanges,
  */
  zoomControl: boolean = true;
 
+ /**
+ * Styles to apply to each of the default map types. Note that for Satellite/Hybrid and Terrain
+ * modes, these styles will only apply to labels and geometry.
+ */
+ styles: MapTypeStyle[] = [];
+
  /**
  * Map option attributes that can change over time
  */
  private static _mapOptionsAttributes: string[] = [
  'disableDoubleClickZoom', 'scrollwheel', 'draggableCursor', 'draggingCursor',
- 'keyboardShortcuts', 'zoomControl'
+ 'keyboardShortcuts', 'zoomControl', 'styles'
  ];
 
  /**
@@ -158,7 +166,8 @@ export class SebmGoogleMap implements OnChanges,
  draggableCursor: this.draggableCursor,
  draggingCursor: this.draggingCursor,
  keyboardShortcuts: this.keyboardShortcuts,
- zoomControl: this.zoomControl
+ zoomControl: this.zoomControl,
+ styles: this.styles
  });
  this._handleMapCenterChange();
  this._handleMapZoomChange();

src/core/services/google-maps-types.ts

@@ -63,6 +63,35 @@ export interface MapOptions {
  draggingCursor?: string;
  keyboardShortcuts?: boolean;
  zoomControl?: boolean;
+ styles?: MapTypeStyle[];
+}
+
+export interface MapTypeStyle {
+ elementType: 'all'|'geometry'|'geometry.fill'|'geometry.stroke'|'labels'|'labels.icon'|
+ 'labels.text'|'labels.text.fill'|'labels.text.stroke';
+ featureType: 'administrative'|'administrative.country'|'administrative.land_parcel'|
+ 'administrative.locality'|'administrative.neighborhood'|'administrative.province'|'all'|
+ 'landscape'|'landscape.man_made'|'landscape.natural'|'landscape.natural.landcover'|
+ 'landscape.natural.terrain'|'poi'|'poi.attraction'|'poi.business'|'poi.government'|
+ 'poi.medical'|'poi.park'|'poi.place_of_worship'|'poi.school'|'poi.sports_complex'|'road'|
+ 'road.arterial'|'road.highway'|'road.highway.controlled_access'|'road.local'|'transit'|
+ 'transit.line'|'transit.station'|'transit.station.airport'|'transit.station.bus'|
+ 'transit.station.rail'|'water';
+ stylers: MapTypeStyler[];
+}
+
+/**
+ * If more than one key is specified in a single MapTypeStyler, all but one will be ignored.
+ */
+export interface MapTypeStyler {
+ color?: string;
+ gamma?: number;
+ hue?: string;
+ invert_lightness?: boolean;
+ lightness?: number;
+ saturation?: number;
+ visibility?: string;
+ weight?: number;
 }
 
 export interface InfoWindow {