feat(google-maps): Add MapPolygon component

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

@@ -14,6 +14,7 @@
                 (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>
   </google-map>
 
   <p><label>Latitude:</label> {{display?.lat}}</p>
@@ -28,4 +29,13 @@
     <input id="editable-polyline-checkbox" type="checkbox" (click)="toggleEditablePolyline()">
   </div>
 
+  <div>
+    <label for="polygon-checkbox">Toggle Polygon</label>
+    <input id="polygon-checkbox" type="checkbox" (click)="togglePolygonDisplay()">
+  </div>
+  <div>
+    <label for="editable-polygon-checkbox">Toggle Editable Polygon</label>
+    <input id="editable-polygon-checkbox" type="checkbox" (click)="toggleEditablePolygon()">
+  </div>
+
 </div>

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

@@ -7,11 +7,14 @@
  */
 
 import {Component, ViewChild} from '@angular/core';
-import {MapInfoWindow, MapMarker} from '@angular/google-maps';
+import {MapInfoWindow, MapMarker, MapPolygon, MapPolyline} 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}];
+
 /** Demo Component for @angular/google-maps/map */
 @Component({
   selector: 'google-map-demo',
@@ -20,6 +23,8 @@ const POLYLINE_PATH: google.maps.LatLngLiteral[] =
 })
 export class GoogleMapDemo {
   @ViewChild(MapInfoWindow) infoWindow: MapInfoWindow;
+  @ViewChild(MapPolyline) polyline: MapPolyline;
+  @ViewChild(MapPolygon) polygon: MapPolygon;
 
   center = {lat: 24, lng: 12};
   markerOptions = {draggable: false};
@@ -29,6 +34,9 @@ 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};
 
   handleClick(event: google.maps.MouseEvent) {
     this.markerPositions.push(event.latLng.toJSON());
@@ -51,6 +59,22 @@ 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()
+    };
   }
 }

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

@@ -11,13 +11,15 @@ 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';
 
 const COMPONENTS = [
   GoogleMap,
   MapInfoWindow,
   MapMarker,
   MapPolyline,
+  MapPolygon,
 ];
 
 @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() {}
+}