feat(SebmGoogleMap): support disableDoubleClickZoom mapOption

The new disableDoubleClickZoom bind enables/disables the zoom and center on double click: ``` <sebm-google-map [disableDoubleClickZoom]="true"> </sebm-google-map> ```
sebholstein · Dec 27, 2015 · fff0a29 · fff0a29
1 parent 5f1ae68
commit fff0a29
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 11 deletions.
diff --git a/docs/api/components_directives/sebmGoogleMap.md b/docs/api/components_directives/sebmGoogleMap.md
@@ -24,11 +24,12 @@ import {SebmGoogleMap} from 'angular2-google-maps/core';
 
 ### Bindings
 
-| HTML Attribute Name | Type   | Required | Default | Description                             |
-|---------------------|--------|----------|---------|-----------------------------------------|
-| latitude            | number | yes      | 0       | The latitude for the center of the map  |
-| longitude           | number | yes      | 0       | The longitude for the center of the map |
-| zoom                | number | no       | 8       | The initial zoom level of the map       |
+| HTML Attribute Name    | Type    | Required | Default | Description                                       |
+|------------------------|---------|----------|---------|---------------------------------------------------|
+| latitude               | number  | yes      | `0`     | The latitude for the center of the map            |
+| longitude              | number  | yes      | `0`     | The longitude for the center of the map           |
+| zoom                   | number  | no       | `8`     | The initial zoom level of the map                 |
+| disableDoubleClickZoom | boolean | no       | `false` | Enables/disables zoom and center on double click. |
 
 ### Events
 

diff --git a/src/directives/google-map.ts b/src/directives/google-map.ts
@@ -1,4 +1,13 @@
-import {Component, Input, Output, Renderer, ElementRef, EventEmitter} from 'angular2/core';
+import {
+  Component,
+  Input,
+  Output,
+  Renderer,
+  ElementRef,
+  EventEmitter,
+  OnChanges,
+  SimpleChange
+} from 'angular2/core';
 import {GoogleMapsAPIWrapper} from '../services/google-maps-api-wrapper';
 import {MarkerManager} from '../services/marker-manager';
 import {LatLng, LatLngLiteral} from '../services/google-maps-types';
@@ -22,16 +31,20 @@ import {LatLng, LatLngLiteral} from '../services/google-maps-types';
     <ng-content></ng-content>
   `
 })
-export class SebmGoogleMap {
+export class SebmGoogleMap implements OnChanges {
   private _longitude: number = 0;
   private _latitude: number = 0;
   private _zoom: number = 8;
-  private _mapsWrapper: GoogleMapsAPIWrapper;
+  @Input() disableDoubleClickZoom: boolean = false;
+
+  private static _mapOptionsAttributes: string[] = ['disableDoubleClickZoom'];
 
   @Output() mapClick: EventEmitter<MapMouseEvent> = new EventEmitter<MapMouseEvent>();
   @Output() mapRightClick: EventEmitter<MapMouseEvent> = new EventEmitter<MapMouseEvent>();
   @Output() mapDblClick: EventEmitter<MapMouseEvent> = new EventEmitter<MapMouseEvent>();
 
+  private _mapsWrapper: GoogleMapsAPIWrapper;
+
   constructor(elem: ElementRef, _mapsWrapper: GoogleMapsAPIWrapper, renderer: Renderer) {
     this._mapsWrapper = _mapsWrapper;
     renderer.setElementClass(elem, 'sebm-google-map-container', true);
@@ -40,12 +53,28 @@ export class SebmGoogleMap {
   }
 
   private _initMapInstance(el: HTMLElement) {
-    this._mapsWrapper.createMap(el, this._latitude, this._longitude);
+    this._mapsWrapper.createMap(el, {center: {lat: this._latitude, lng: this._longitude}});
     this._handleMapCenterChange();
     this._handleMapZoomChange();
     this._handleMapMouseEvents();
   }
 
+  private static _containsMapOptionsChange(changesKeys: string[]): boolean {
+    return changesKeys.every(
+        (key: string) => { return SebmGoogleMap._mapOptionsAttributes.indexOf(key) !== 1; });
+  }
+
+  ngOnChanges(changes: {[propName: string]: SimpleChange}) {
+    console.log(changes);
+    if (SebmGoogleMap._containsMapOptionsChange(Object.keys(changes))) {
+      this._setMapOptions();
+    }
+  }
+
+  _setMapOptions() {
+    this._mapsWrapper.setMapOptions({disableDoubleClickZoom: this.disableDoubleClickZoom});
+  }
+
   @Input()
   set zoom(value: number | string) {
     this._zoom = this._convertToDecimal(value);

diff --git a/src/services/google-maps-api-wrapper.ts b/src/services/google-maps-api-wrapper.ts
@@ -22,14 +22,18 @@ export class GoogleMapsAPIWrapper {
         new Promise<mapTypes.GoogleMap>((resolve: () => void) => { this._mapResolver = resolve; });
   }
 
-  createMap(el: HTMLElement, latitude: number, longitude: number): Promise<void> {
+  createMap(el: HTMLElement, mapOptions: mapTypes.MapOptions): Promise<void> {
     return this._loader.load().then(() => {
-      const map = new google.maps.Map(el, {center: {lat: latitude, lng: longitude}});
+      const map = new google.maps.Map(el, mapOptions);
       this._mapResolver(<mapTypes.GoogleMap>map);
       return;
     });
   }
 
+  setMapOptions(options: mapTypes.MapOptions) {
+    this._map.then((m: mapTypes.GoogleMap) => { m.setOptions(options); });
+  }
+
   /**
    * Creates a google map marker with the map context
    */

diff --git a/src/services/google-maps-types.ts b/src/services/google-maps-types.ts
@@ -8,6 +8,7 @@ export interface GoogleMap {
   getCenter(): LatLng;
   setCenter(latLng: LatLng | LatLngLiteral): void;
   getZoom(): number;
+  setOptions(options: MapOptions): void;
 }
 
 export interface LatLng {
@@ -49,4 +50,5 @@ export interface LatLngLiteral {
 export interface MapOptions {
   center?: LatLng | LatLngLiteral;
   zoom?: number;
+  disableDoubleClickZoom?: boolean;
 }