fix(SebmGoogleMap): use ngOnInit to support angular 2.0.0-beta.1

closes #79
closes #76

package.json

@@ -19,12 +19,12 @@
   },
   "homepage": "https://github.com/SebastianM/angular2-google-maps#readme",
   "dependencies": {
-    "angular2": "^2.0.0-beta.0",
+    "angular2": "^2.0.0-beta.1",
     "es6-promise": "^3.0.2",
     "es6-shim": "^0.33.3",
-    "reflect-metadata": "^0.1.2",
-    "rxjs": "^5.0.0-beta.0",
-    "zone.js": "^0.5.10"
+    "reflect-metadata": "0.1.2",
+    "rxjs": "5.0.0-beta.0",
+    "zone.js": "0.5.10"
   },
   "devDependencies": {
     "babel-eslint": "4.1.6",
@@ -55,12 +55,12 @@
   "jspm": {
     "jspmNodeConversion": false,
     "dependencies": {
-      "angular2": "^2.0.0-beta.0",
+      "angular2": "^2.0.0-beta.1",
       "es6-promise": "^3.0.2",
       "es6-shim": "^0.33.3",
-      "reflect-metadata": "^0.1.2",
-      "rxjs": "^5.0.0-beta.0",
-      "zone.js": "^0.5.10"
+      "reflect-metadata": "0.1.2",
+      "rxjs": "5.0.0-beta.0",
+      "zone.js": "0.5.10"
     }
   },
   "typescript": {

src/directives/google-map-marker.ts

@@ -1,29 +1,71 @@
-import {
-  Directive,
-  Input,
-  SimpleChange,
-  OnDestroy,
-  OnChanges,
-  EventEmitter,
-  Output
-} from 'angular2/core';
+import {Directive, SimpleChange, OnDestroy, OnChanges, EventEmitter} from 'angular2/core';
 import {MarkerManager} from '../services/marker-manager';
 
 let markerId = 0;
 
-@Directive({selector: 'sebm-google-map-marker'})
-export class SebmGoogleMapMarker implements OnDestroy, OnChanges {
-  @Input() latitude: number;
-  @Input() longitude: number;
-  @Input() title: string;
-  @Input() label: string;
-  @Output() markerClick: EventEmitter<void> = new EventEmitter<void>();
+/**
+ * SebmGoogleMapMarker renders a map marker inside a {@link SebmGoogleMap}.
+ *
+ * ### Example
+ * ```typescript
+ * import {Component} from 'angular2/core';
+ * import {SebmGoogleMap, SebmGoogleMapMarker} from 'angular2-google-maps/core';
+ *
+ * @Component({
+ *  selector: 'my-map-cmp',
+ *  directives: [SebmGoogleMap, SebmGoogleMapMarker],
+ *  styles: [`
+ *    .sebm-google-map-container {
+ *      height: 300px;
+ *    }
+ * `],
+ *  template: `
+ *    <sebm-google-map [latitude]="lat" [longitude]="lng" [zoom]="zoom">
+ *      <sebm-google-map-marker [latitude]="lat" [longitude]="lng" [label]="'M'">
+ *      </sebm-google-map-marker>
+ *    </sebm-google-map>
+ *  `
+ * })
+ * ```
+ */
+@Directive({
+  selector: 'sebm-google-map-marker',
+  inputs: ['latitude', 'longitude', 'title', 'label'],
+  outputs: ['markerClick']
+})
+export class SebmGoogleMapMarker implements OnDestroy,
+    OnChanges {
+  /**
+   * The latitude position of the marker.
+   */
+  latitude: number;
+
+  /**
+   * The longitude position of the marker.
+   */
+  longitude: number;
+
+  /**
+   * The title of the marker.
+   */
+  title: string;
+
+  /**
+   * The label (a single uppercase character) for the marker.
+   */
+  label: string;
+
+  /**
+   * This event emitter gets emitted when the user clicks on the marker.
+   */
+  markerClick: EventEmitter<void> = new EventEmitter<void>();
 
   private _markerAddedToManger: boolean = false;
   private _id: string;
 
   constructor(private _markerManager: MarkerManager) { this._id = (markerId++).toString(); }
 
+  /** @internal */
   ngOnChanges(changes: {[key: string]: SimpleChange}) {
     if (!this._markerAddedToManger && this.latitude && this.longitude) {
       this._markerManager.addMarker(this);
@@ -43,9 +85,12 @@ export class SebmGoogleMapMarker implements OnDestroy, OnChanges {
     }
   }
 
+  /** @internal */
   id(): string { return this._id; }
 
+  /** @internal */
   toString(): string { return 'SebmGoogleMapMarker-' + this._id.toString(); }
 
+  /** @internal */
   ngOnDestroy() { this._markerManager.deleteMarker(this); }
 }

src/directives/google-map.ts

@@ -1,19 +1,40 @@
 import {
   Component,
-  Input,
-  Output,
   Renderer,
   ElementRef,
   EventEmitter,
   OnChanges,
+  OnInit,
   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';
 
 /**
- * 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,31 +107,34 @@ 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') {
       this._mapsWrapper.setZoom(this._zoom);
     }
   }
 
-  @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();