From 53320d61694680a74a71f93e5a3ecd783367cfb6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20M=C3=BCller?= <info@sebastian-mueller.net>
Date: Tue, 12 Jan 2016 22:26:18 +0100
Subject: [PATCH] fix SebmGoogleMap

---
 src/directives/google-map.ts | 92 +++++++++++++++++++++++++++---------
 1 file changed, 69 insertions(+), 23 deletions(-)

diff --git a/src/directives/google-map.ts b/src/directives/google-map.ts
index d01ac8956..ff2f27b7e 100644
--- a/src/directives/google-map.ts
+++ b/src/directives/google-map.ts
@@ -1,11 +1,10 @@
 import {
   Component,
-  Input,
-  Output,
   Renderer,
   ElementRef,
   EventEmitter,
   OnChanges,
+  OnInit,
   SimpleChange
 } from 'angular2/core';
 import {GoogleMapsAPIWrapper} from '../services/google-maps-api-wrapper';
@@ -13,7 +12,29 @@ import {MarkerManager} from '../services/marker-manager';
 import {LatLng, LatLngLiteral} from '../services/google-maps-types';
 
 /**
- * Todo: add docs
+ * SebMGoogleMap renders a Google Map.
+ * **Important note**: To be able see a map in the browser, you have to define a height for the CSS
+ * class `sebm-google-map-container`.
+ *
+ * ### Example
+ * ```typescript
+ * import {Component} from 'angular2/core';
+ * import {SebmGoogleMap} from 'angular2-google-maps/core';
+ *
+ * @Component({
+ *  selector: 'my-map-cmp',
+ *  directives: [SebmGoogleMap],
+ *  styles: [`
+ *    .sebm-google-map-container {
+ *      height: 300px;
+ *    }
+ * `],
+ *  template: `
+ *    <sebm-google-map [latitude]="lat" [longitude]="lng" [zoom]="zoom">
+ *    </sebm-google-map>
+ *  `
+ * })
+ * ```
  */
 @Component({
   selector: 'sebm-google-map',
@@ -26,29 +47,51 @@ import {LatLng, LatLngLiteral} from '../services/google-maps-types';
     }
   `
   ],
+  inputs: ['longitude', 'latitude', 'zoom', 'disableDoubleClickZoom'],
+  outputs: ['mapClick', 'mapRightClick', 'mapDblClick'],
   template: `
     <div class="sebm-google-map-container-inner"></div>
     <ng-content></ng-content>
   `
 })
-export class SebmGoogleMap implements OnChanges {
+export class SebmGoogleMap implements OnChanges,
+    OnInit {
   private _longitude: number = 0;
   private _latitude: number = 0;
   private _zoom: number = 8;
-  @Input() disableDoubleClickZoom: boolean = false;
+  /**
+   * Enables/disables zoom and center on double click. Enabled by default.
+   */
+  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);
-    const container = elem.nativeElement.querySelector('.sebm-google-map-container-inner');
+  /**
+   * This event emitter gets emitted when the user clicks on the map (but not when they click on a
+   * marker or infoWindow).
+   */
+  mapClick: EventEmitter<MapMouseEvent> = new EventEmitter<MapMouseEvent>();
+
+  /**
+   * This event emitter gets emitted when the user right-clicks on the map (but not when they click
+   * on a marker or infoWindow).
+   */
+  mapRightClick: EventEmitter<MapMouseEvent> = new EventEmitter<MapMouseEvent>();
+
+  /**
+   * This event emitter gets emitted when the user double-clicks on the map (but not when they click
+   * on a marker or infoWindow).
+   */
+  mapDblClick: EventEmitter<MapMouseEvent> = new EventEmitter<MapMouseEvent>();
+
+  constructor(
+      private _elem: ElementRef, private _mapsWrapper: GoogleMapsAPIWrapper,
+      private _renderer: Renderer) {}
+
+  /** @internal */
+  ngOnInit() {
+    this._renderer.setElementClass(this._elem.nativeElement, 'sebm-google-map-container', true);
+    const container = this._elem.nativeElement.querySelector('.sebm-google-map-container-inner');
     this._initMapInstance(container);
   }
 
@@ -64,17 +107,16 @@ export class SebmGoogleMap implements OnChanges {
         (key: string) => { return SebmGoogleMap._mapOptionsAttributes.indexOf(key) !== 1; });
   }
 
+  /** @internal */
   ngOnChanges(changes: {[propName: string]: SimpleChange}) {
     if (SebmGoogleMap._containsMapOptionsChange(Object.keys(changes))) {
-      this._setMapOptions();
+      this._mapsWrapper.setMapOptions({disableDoubleClickZoom: this.disableDoubleClickZoom});
     }
   }
 
-  _setMapOptions() {
-    this._mapsWrapper.setMapOptions({disableDoubleClickZoom: this.disableDoubleClickZoom});
-  }
-
-  @Input()
+  /**
+   * Sets the zoom level of the map. The default value is `8`.
+   */
   set zoom(value: number | string) {
     this._zoom = this._convertToDecimal(value);
     if (typeof this._zoom === 'number') {
@@ -82,13 +124,17 @@ export class SebmGoogleMap implements OnChanges {
     }
   }
 
-  @Input()
+  /**
+   * The longitude that sets the center of the map.
+   */
   set longitude(value: number | string) {
     this._longitude = this._convertToDecimal(value);
     this._updateCenter();
   }
 
-  @Input()
+  /**
+   * The latitude that sets the center of the map.
+   */
   set latitude(value: number | string) {
     this._latitude = this._convertToDecimal(value);
     this._updateCenter();