From 8f60c54092d50744733f67d579edd1ef55d5a427 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20M=C3=BCller?= <info@sebastian-mueller.net>
Date: Sun, 21 Feb 2016 22:15:02 +0100
Subject: [PATCH] feat(SebmGoogleMapMarker): support dragend event

closes #71
closes #149
---
 src/directives/google-map-marker.ts | 22 +++++++++++++++++++---
 src/services/google-maps-types.ts   |  2 ++
 src/services/marker-manager.ts      |  6 +++---
 3 files changed, 24 insertions(+), 6 deletions(-)

diff --git a/src/directives/google-map-marker.ts b/src/directives/google-map-marker.ts
index 3f7063d34..8ab75db02 100644
--- a/src/directives/google-map-marker.ts
+++ b/src/directives/google-map-marker.ts
@@ -1,5 +1,7 @@
 import {Directive, SimpleChange, OnDestroy, OnChanges, EventEmitter} from 'angular2/core';
 import {MarkerManager} from '../services/marker-manager';
+import {MouseEvent} from '../events';
+import * as mapTypes from '../services/google-maps-types';
 
 let markerId = 0;
 
@@ -31,7 +33,7 @@ let markerId = 0;
 @Directive({
   selector: 'sebm-google-map-marker',
   inputs: ['latitude', 'longitude', 'title', 'label', 'draggable: markerDraggable'],
-  outputs: ['markerClick']
+  outputs: ['markerClick', 'dragEnd']
 })
 export class SebmGoogleMapMarker implements OnDestroy,
     OnChanges {
@@ -65,6 +67,11 @@ export class SebmGoogleMapMarker implements OnDestroy,
    */
   markerClick: EventEmitter<void> = new EventEmitter<void>();
 
+  /**
+   * This event is fired when the user stops dragging the marker.
+   */
+  dragEnd: EventEmitter<MouseEvent> = new EventEmitter<MouseEvent>();
+
   private _markerAddedToManger: boolean = false;
   private _id: string;
 
@@ -78,8 +85,7 @@ export class SebmGoogleMapMarker implements OnDestroy,
     if (!this._markerAddedToManger) {
       this._markerManager.addMarker(this);
       this._markerAddedToManger = true;
-      this._markerManager.createClickObserable(this).subscribe(
-          () => { this.markerClick.next(null); });
+      this._addEventListeners();
       return;
     }
     if (changes['latitude'] || changes['logitude']) {
@@ -96,6 +102,16 @@ export class SebmGoogleMapMarker implements OnDestroy,
     }
   }
 
+  private _addEventListeners() {
+    this._markerManager.createEventObservable('click', this).subscribe(() => {
+      this.markerClick.next(null);
+    });
+    this._markerManager.createEventObservable<mapTypes.MouseEvent>('dragend', this)
+        .subscribe((e: mapTypes.MouseEvent) => {
+          this.dragEnd.next({coords: {lat: e.latLng.lat(), lng: e.latLng.lng()}});
+        });
+  }
+
   /** @internal */
   id(): string { return this._id; }
 
diff --git a/src/services/google-maps-types.ts b/src/services/google-maps-types.ts
index edeae5cce..f7e33e640 100644
--- a/src/services/google-maps-types.ts
+++ b/src/services/google-maps-types.ts
@@ -49,6 +49,8 @@ export interface LatLngLiteral {
   lng: number;
 }
 
+export interface MouseEvent { latLng: LatLng; }
+
 export interface MapOptions {
   center?: LatLng | LatLngLiteral;
   zoom?: number;
diff --git a/src/services/marker-manager.ts b/src/services/marker-manager.ts
index b9b99da57..5aa338813 100644
--- a/src/services/marker-manager.ts
+++ b/src/services/marker-manager.ts
@@ -52,10 +52,10 @@ export class MarkerManager {
     this._markers.set(marker, markerPromise);
   }
 
-  createClickObserable(marker: SebmGoogleMapMarker): Observable<void> {
-    return Observable.create((observer: Observer<void>) => {
+  createEventObservable<T>(eventName: string, marker: SebmGoogleMapMarker): Observable<T> {
+    return Observable.create((observer: Observer<T>) => {
       this._markers.get(marker).then((m: Marker) => {
-        m.addListener('click', () => this._zone.run(() => observer.next(null)));
+        m.addListener(eventName, (e: T) => this._zone.run(() => observer.next(e)));
       });
     });
   }