Maps update

src/dev-app/google-map/google-map-demo.html

@@ -14,18 +14,56 @@
                 (mapClick)="clickMarker(marker)"></map-marker>
     <map-info-window>Testing 1 2 3</map-info-window>
     <map-polyline *ngIf="isPolylineDisplayed" [options]="polylineOptions"></map-polyline>
+    <map-polygon *ngIf="isPolygonDisplayed" [options]="polygonOptions"></map-polygon>
+    <map-rectangle *ngIf="isRectangleDisplayed" [options]="rectangleOptions"></map-rectangle>
   </google-map>
 
   <p><label>Latitude:</label> {{display?.lat}}</p>
   <p><label>Longitude:</label> {{display?.lng}}</p>
 
   <div>
-    <label for="polyline-checkbox">Toggle Polyline</label>
-    <input id="polyline-checkbox" type="checkbox" (click)="togglePolylineDisplay()">
+    <label for="polyline-checkbox">
+      Toggle Polyline
+      <input type="checkbox" (click)="togglePolylineDisplay()">
+    </label>
   </div>
   <div>
-    <label for="editable-polyline-checkbox">Toggle Editable Polyline</label>
-    <input id="editable-polyline-checkbox" type="checkbox" (click)="toggleEditablePolyline()">
+    <label for="editable-polyline-checkbox">
+      Toggle Editable Polyline
+      <input type="checkbox"
+             [disabled]="!isPolylineDisplayed"
+             (click)="toggleEditablePolyline()">
+    </label>
+  </div>
+
+  <div>
+    <label for="polygon-checkbox">
+      Toggle Polygon
+      <input type="checkbox" (click)="togglePolygonDisplay()">
+    </label>
+  </div>
+  <div>
+    <label for="editable-polygon-checkbox">
+      Toggle Editable Polygon
+      <input type="checkbox"
+             [disabled]="!isPolygonDisplayed"
+             (click)="toggleEditablePolygon()">
+    </label>
+  </div>
+
+  <div>
+    <label for="rectangle-checkbox">
+      Toggle Rectangle
+      <input type="checkbox" (click)="toggleRectangleDisplay()">
+    </label>
+  </div>
+  <div>
+    <label for="editable-rectangle-checkbox">
+      Toggle Editable Rectangle
+      <input type="checkbox"
+             [disabled]="!isRectangleDisplayed"
+             (click)="toggleEditableRectangle()">
+    </label>
   </div>
 
 </div>

src/dev-app/google-map/google-map-demo.ts

@@ -7,11 +7,27 @@
  */
 
 import {Component, ViewChild} from '@angular/core';
-import {MapInfoWindow, MapMarker} from '@angular/google-maps';
+import {
+  MapInfoWindow,
+  MapMarker,
+  MapPolygon,
+  MapPolyline,
+  MapRectangle
+} from '@angular/google-maps';
 
 const POLYLINE_PATH: google.maps.LatLngLiteral[] =
     [{lat: 25, lng: 26}, {lat: 26, lng: 27}, {lat: 30, lng: 34}];
 
+const POLYGON_PATH: google.maps.LatLngLiteral[] =
+    [{lat: 20, lng: 21}, {lat: 22, lng: 23}, {lat: 24, lng: 25}];
+
+const RECTANGLE_BOUNDS: google.maps.LatLngBoundsLiteral = {
+  east: 30,
+  north: 15,
+  west: 10,
+  south: -5
+};
+
 /** Demo Component for @angular/google-maps/map */
 @Component({
   selector: 'google-map-demo',
@@ -20,6 +36,9 @@ const POLYLINE_PATH: google.maps.LatLngLiteral[] =
 })
 export class GoogleMapDemo {
   @ViewChild(MapInfoWindow) infoWindow: MapInfoWindow;
+  @ViewChild(MapPolyline) polyline: MapPolyline;
+  @ViewChild(MapPolygon) polygon: MapPolygon;
+  @ViewChild(MapRectangle) rectangle: MapRectangle;
 
   center = {lat: 24, lng: 12};
   markerOptions = {draggable: false};
@@ -29,6 +48,12 @@ export class GoogleMapDemo {
   isPolylineDisplayed = false;
   polylineOptions:
       google.maps.PolylineOptions = {path: POLYLINE_PATH, strokeColor: 'grey', strokeOpacity: 0.8};
+  isPolygonDisplayed = false;
+  polygonOptions:
+      google.maps.PolygonOptions = {paths: POLYGON_PATH, strokeColor: 'grey', strokeOpacity: 0.8};
+  isRectangleDisplayed = false;
+  rectangleOptions: google.maps
+      .RectangleOptions = {bounds: RECTANGLE_BOUNDS, strokeColor: 'grey', strokeOpacity: 0.8};
 
   handleClick(event: google.maps.MouseEvent) {
     this.markerPositions.push(event.latLng.toJSON());
@@ -51,6 +76,34 @@ export class GoogleMapDemo {
   }
 
   toggleEditablePolyline() {
-    this.polylineOptions = {...this.polylineOptions, editable: !this.polylineOptions.editable};
+    this.polylineOptions = {
+      ...this.polylineOptions,
+      editable: !this.polylineOptions.editable,
+      path: this.polyline.getPath()
+    };
+  }
+
+  togglePolygonDisplay() {
+    this.isPolygonDisplayed = !this.isPolygonDisplayed;
+  }
+
+  toggleEditablePolygon() {
+    this.polygonOptions = {
+      ...this.polygonOptions,
+      editable: !this.polygonOptions.editable,
+      paths: this.polygon.getPaths()
+    };
+  }
+
+  toggleRectangleDisplay() {
+    this.isRectangleDisplayed = !this.isRectangleDisplayed;
+  }
+
+  toggleEditableRectangle() {
+    this.rectangleOptions = {
+      ...this.rectangleOptions,
+      editable: !this.rectangleOptions.editable,
+      bounds: this.rectangle.getBounds()
+    };
   }
 }

src/google-maps/google-maps-module.ts

@@ -11,13 +11,17 @@ import {NgModule} from '@angular/core';
 import {GoogleMap} from './google-map/google-map';
 import {MapInfoWindow} from './map-info-window/map-info-window';
 import {MapMarker} from './map-marker/map-marker';
+import {MapPolygon} from './map-polygon/map-polygon';
 import {MapPolyline} from './map-polyline/map-polyline';
+import {MapRectangle} from './map-rectangle/map-rectangle';
 
 const COMPONENTS = [
   GoogleMap,
   MapInfoWindow,
   MapMarker,
   MapPolyline,
+  MapPolygon,
+  MapRectangle,
 ];
 
 @NgModule({

src/google-maps/map-polygon/map-polygon.spec.ts

@@ -0,0 +1,164 @@
+import {Component, ViewChild} from '@angular/core';
+import {async, TestBed} from '@angular/core/testing';
+import {By} from '@angular/platform-browser';
+
+import {DEFAULT_OPTIONS, UpdatedGoogleMap} from '../google-map/google-map';
+import {GoogleMapsModule} from '../google-maps-module';
+import {
+  createMapConstructorSpy,
+  createMapSpy,
+  createPolygonConstructorSpy,
+  createPolygonSpy,
+  TestingWindow,
+} from '../testing/fake-google-map-utils';
+
+import {MapPolygon} from './map-polygon';
+
+describe('MapPolygon', () => {
+  let mapSpy: jasmine.SpyObj<UpdatedGoogleMap>;
+  let polygonPath: google.maps.LatLngLiteral[];
+  let polygonOptions: google.maps.PolygonOptions;
+
+  beforeEach(async(() => {
+    polygonPath = [{lat: 25, lng: 26}, {lat: 26, lng: 27}, {lat: 30, lng: 34}];
+    polygonOptions = {paths: polygonPath, strokeColor: 'grey', strokeOpacity: 0.8};
+    TestBed.configureTestingModule({
+      imports: [GoogleMapsModule],
+      declarations: [TestApp],
+    });
+  }));
+
+  beforeEach(() => {
+    TestBed.compileComponents();
+
+    mapSpy = createMapSpy(DEFAULT_OPTIONS);
+    createMapConstructorSpy(mapSpy).and.callThrough();
+  });
+
+  afterEach(() => {
+    const testingWindow: TestingWindow = window;
+    delete testingWindow.google;
+  });
+
+  it('initializes a Google Map Polygon', () => {
+    const polygonSpy = createPolygonSpy({});
+    const polygonConstructorSpy = createPolygonConstructorSpy(polygonSpy).and.callThrough();
+
+    const fixture = TestBed.createComponent(TestApp);
+    fixture.detectChanges();
+
+    expect(polygonConstructorSpy).toHaveBeenCalledWith({paths: undefined});
+    expect(polygonSpy.setMap).toHaveBeenCalledWith(mapSpy);
+  });
+
+  it('sets path from input', () => {
+    const paths: google.maps.LatLngLiteral[] = [{lat: 3, lng: 5}];
+    const options: google.maps.PolygonOptions = {paths};
+    const polygonSpy = createPolygonSpy(options);
+    const polygonConstructorSpy = createPolygonConstructorSpy(polygonSpy).and.callThrough();
+
+    const fixture = TestBed.createComponent(TestApp);
+    fixture.componentInstance.paths = paths;
+    fixture.detectChanges();
+
+    expect(polygonConstructorSpy).toHaveBeenCalledWith(options);
+  });
+
+  it('gives precedence to path input over options', () => {
+    const paths: google.maps.LatLngLiteral[] = [{lat: 3, lng: 5}];
+    const expectedOptions: google.maps.PolygonOptions = {...polygonOptions, paths};
+    const polygonSpy = createPolygonSpy(expectedOptions);
+    const polygonConstructorSpy = createPolygonConstructorSpy(polygonSpy).and.callThrough();
+
+    const fixture = TestBed.createComponent(TestApp);
+    fixture.componentInstance.options = polygonOptions;
+    fixture.componentInstance.paths = paths;
+    fixture.detectChanges();
+
+    expect(polygonConstructorSpy).toHaveBeenCalledWith(expectedOptions);
+  });
+
+  it('exposes methods that provide information about the Polygon', () => {
+    const polygonSpy = createPolygonSpy(polygonOptions);
+    createPolygonConstructorSpy(polygonSpy).and.callThrough();
+
+    const fixture = TestBed.createComponent(TestApp);
+    const polygonComponent =
+        fixture.debugElement.query(By.directive(MapPolygon))!.injector.get<MapPolygon>(MapPolygon);
+    fixture.detectChanges();
+
+    polygonSpy.getDraggable.and.returnValue(true);
+    expect(polygonComponent.getDraggable()).toBe(true);
+
+    polygonSpy.getEditable.and.returnValue(true);
+    expect(polygonComponent.getEditable()).toBe(true);
+
+    polygonComponent.getPath();
+    expect(polygonSpy.getPath).toHaveBeenCalled();
+
+    polygonComponent.getPaths();
+    expect(polygonSpy.getPaths).toHaveBeenCalled();
+
+    polygonSpy.getVisible.and.returnValue(true);
+    expect(polygonComponent.getVisible()).toBe(true);
+  });
+
+  it('initializes Polygon event handlers', () => {
+    const polygonSpy = createPolygonSpy(polygonOptions);
+    createPolygonConstructorSpy(polygonSpy).and.callThrough();
+
+    const addSpy = polygonSpy.addListener;
+    const fixture = TestBed.createComponent(TestApp);
+    fixture.detectChanges();
+
+    expect(addSpy).toHaveBeenCalledWith('click', jasmine.any(Function));
+    expect(addSpy).not.toHaveBeenCalledWith('dblclick', jasmine.any(Function));
+    expect(addSpy).not.toHaveBeenCalledWith('drag', jasmine.any(Function));
+    expect(addSpy).not.toHaveBeenCalledWith('dragend', jasmine.any(Function));
+    expect(addSpy).not.toHaveBeenCalledWith('dragstart', jasmine.any(Function));
+    expect(addSpy).not.toHaveBeenCalledWith('mousedown', jasmine.any(Function));
+    expect(addSpy).not.toHaveBeenCalledWith('mousemove', jasmine.any(Function));
+    expect(addSpy).not.toHaveBeenCalledWith('mouseout', jasmine.any(Function));
+    expect(addSpy).not.toHaveBeenCalledWith('mouseover', jasmine.any(Function));
+    expect(addSpy).not.toHaveBeenCalledWith('mouseup', jasmine.any(Function));
+    expect(addSpy).toHaveBeenCalledWith('rightclick', jasmine.any(Function));
+  });
+
+  it('should be able to add an event listener after init', () => {
+    const polygonSpy = createPolygonSpy(polygonOptions);
+    createPolygonConstructorSpy(polygonSpy).and.callThrough();
+
+    const addSpy = polygonSpy.addListener;
+    const fixture = TestBed.createComponent(TestApp);
+    fixture.detectChanges();
+
+    expect(addSpy).not.toHaveBeenCalledWith('dragend', jasmine.any(Function));
+
+    // Pick an event that isn't bound in the template.
+    const subscription = fixture.componentInstance.polygon.polygonDragend.subscribe();
+    fixture.detectChanges();
+
+    expect(addSpy).toHaveBeenCalledWith('dragend', jasmine.any(Function));
+    subscription.unsubscribe();
+  });
+});
+
+@Component({
+  selector: 'test-app',
+  template: `<google-map>
+                <map-polygon [options]="options"
+                              [paths]="paths"
+                              (polygonClick)="handleClick()"
+                              (polygonRightclick)="handleRightclick()">
+                </map-polygon>
+            </google-map>`,
+})
+class TestApp {
+  @ViewChild(MapPolygon) polygon: MapPolygon;
+  options?: google.maps.PolygonOptions;
+  paths?: google.maps.LatLngLiteral[];
+
+  handleClick() {}
+
+  handleRightclick() {}
+}