From fff0a29eb192c3c339fb364e02a3d4e370973f2b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20M=C3=BCller?= Date: Sun, 27 Dec 2015 11:05:48 +0100 Subject: [PATCH] feat(SebmGoogleMap): support disableDoubleClickZoom mapOption The new disableDoubleClickZoom bind enables/disables the zoom and center on double click: ``` ``` --- .../components_directives/sebmGoogleMap.md | 11 +++--- src/directives/google-map.ts | 37 +++++++++++++++++-- src/services/google-maps-api-wrapper.ts | 8 +++- src/services/google-maps-types.ts | 2 + 4 files changed, 47 insertions(+), 11 deletions(-) diff --git a/docs/api/components_directives/sebmGoogleMap.md b/docs/api/components_directives/sebmGoogleMap.md index da66f3ee4..5b72f4973 100644 --- 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 index 67f49a12a..937faf83b 100644 --- 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'; ` }) -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 = new EventEmitter(); @Output() mapRightClick: EventEmitter = new EventEmitter(); @Output() mapDblClick: EventEmitter = new EventEmitter(); + 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 index b6de394b3..d66c63632 100644 --- 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((resolve: () => void) => { this._mapResolver = resolve; }); } - createMap(el: HTMLElement, latitude: number, longitude: number): Promise { + createMap(el: HTMLElement, mapOptions: mapTypes.MapOptions): Promise { 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(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 index fbbce92c8..df693c7fc 100644 --- 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; }