refactor(GoogleMapsAPIWrapper): handle maps events more generic

sebholstein · Dec 23, 2015 · 5ed34be · 5ed34be
1 parent a65f086
commit 5ed34be
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 43 deletions.
diff --git a/src/directives/google-map.ts b/src/directives/google-map.ts
@@ -1,7 +1,7 @@
-import {Component, Input, Renderer, ElementRef, NgZone} from 'angular2/core';
+import {Component, Input, Renderer, ElementRef} from 'angular2/core';
 import {GoogleMapsAPIWrapper} from '../services/google-maps-api-wrapper';
 import {MarkerManager} from '../services/marker-manager';
-import {LatLngLiteral} from '../services/google-maps-types';
+import {LatLng} from '../services/google-maps-types';
 
 /**
  * Todo: add docs
@@ -37,8 +37,8 @@ export class SebmGoogleMap {
 
   private _initMapInstance(el: HTMLElement) {
     this._mapsWrapper.createMap(el, this._latitude, this._longitude);
-    this._handleMapsCenterChanged();
-    this._handleZoomChanged();
+    this._handleMapCenterChange();
+    this._handleMapZoomChange();
   }
 
   @Input()
@@ -80,14 +80,17 @@ export class SebmGoogleMap {
     });
   }
 
-  private _handleMapsCenterChanged() {
-    this._mapsWrapper.getCenterChangeObservable().subscribe((latLng: LatLngLiteral) => {
-      this._latitude = latLng.lat;
-      this._longitude = latLng.lng;
+  private _handleMapCenterChange() {
+    this._mapsWrapper.subscribeToMapEvent<void>('center_changed').subscribe(() => {
+      this._mapsWrapper.getCenter().then((center: LatLng) => {
+        this._latitude = center.lat();
+        this._longitude = center.lng();
+      });
     });
   }
 
-  private _handleZoomChanged() {
-    this._mapsWrapper.getZoomChangeObserable().subscribe((zoom: number) => this._zoom = zoom);
+  private _handleMapZoomChange() {
+    this._mapsWrapper.subscribeToMapEvent<void>('zoom_changed')
+        .subscribe(() => { this._mapsWrapper.getZoom().then((z: number) => this._zoom = z); });
   }
 }
diff --git a/src/services/google-maps-api-wrapper.ts b/src/services/google-maps-api-wrapper.ts
@@ -1,4 +1,4 @@
-import {Injectable} from 'angular2/core';
+import {Injectable, NgZone} from 'angular2/core';
 import {Observer} from 'rxjs/Observer';
 import {Observable} from 'rxjs/Observable';
 
@@ -15,14 +15,9 @@ declare var google: any;
 @Injectable()
 export class GoogleMapsAPIWrapper {
   private _map: Promise<mapTypes.GoogleMap>;
-
-  private _centerChangeObservable: Observable<mapTypes.LatLngLiteral>;
-  private _zoomChangeObservable: Observable<number>;
-
   private _mapResolver: (value?: mapTypes.GoogleMap) => void;
 
-  constructor(private _loader: MapsAPILoader) {
-    this._createObservables();
+  constructor(private _loader: MapsAPILoader, private _zone: NgZone) {
     this._map =
         new Promise<mapTypes.GoogleMap>((resolve: () => void) => { this._mapResolver = resolve; });
   }
@@ -35,28 +30,6 @@ export class GoogleMapsAPIWrapper {
     });
   }
 
-  createEventObservable<E>(eventName: string, callback: (observer: Observer<E>) => void):
-      Observable<E> {
-    return Observable.create((observer: Observer<E>) => {
-      this._map.then(
-          (m: mapTypes.GoogleMap) => m.addListener(eventName, () => { callback(observer); }));
-    });
-  }
-
-  private _createObservables() {
-    this._centerChangeObservable = this.createEventObservable<mapTypes.LatLngLiteral>(
-        'center_changed', (observer: Observer<mapTypes.LatLngLiteral>) => {
-          this._map.then((map: mapTypes.GoogleMap) => {
-            const center = map.getCenter();
-            observer.next({lat: center.lat(), lng: center.lng()});
-          });
-        });
-    this._zoomChangeObservable =
-        this.createEventObservable<number>('zoom_changed', (observer: Observer<number>) => {
-          this._map.then((map: mapTypes.GoogleMap) => { observer.next(map.getZoom()); });
-        });
-  }
-
   /**
    * Creates a google map marker with the map context
    */
@@ -68,16 +41,20 @@ export class GoogleMapsAPIWrapper {
     });
   }
 
-  getZoomChangeObserable(): Observable<number> { return this._zoomChangeObservable; }
-
-  getCenterChangeObservable(): Observable<mapTypes.LatLngLiteral> {
-    return this._centerChangeObservable;
+  subscribeToMapEvent<E>(eventName: string): Observable<E> {
+    return Observable.create((observer: Observer<E>) => {
+      this._map.then((m: mapTypes.GoogleMap) => {
+        m.addListener(eventName, (arg: E) => { this._zone.run(() => observer.next(arg)); });
+      });
+    });
   }
 
   setCenter(latLng: mapTypes.LatLngLiteral): Promise<void> {
     return this._map.then((map: mapTypes.GoogleMap) => map.setCenter(latLng));
   }
 
+  getZoom(): Promise<number> { return this._map.then((map: mapTypes.GoogleMap) => map.getZoom()); }
+
   setZoom(zoom: number): Promise<void> {
     return this._map.then((map: mapTypes.GoogleMap) => map.setZoom(zoom));
   }