feat(google-maps): Add methods and event handling to Google Map (#16804)

* feat(google-maps): Add methods and event handling to Google Map

Add support for Google Maps event handlers, properties, and methods to
the Google Map component, including click handlers, methods to pan with
the map and access to the controls and data properties.

* feat(google-maps): Add methods and event handling to Google Map

Change event names so they will not collide with native angular events.

* feat(google-maps): Add methods and event handling to Google Map

Add jsdoc and comments to new events, methods, and properties.

Author: mbehrlich

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

@@ -2,4 +2,9 @@
             height="400px"
             width="750px"
             [center]="center"
-            [zoom]="zoom"></google-map>
+            [zoom]="zoom"
+            (mapClick)="handleClick($event)"
+            (mapMousemove)="handleMove($event)"></google-map>
+
+<div>Latitude: {{display?.lat}}</div>
+<div>Longitude: {{display?.lng}}</div>

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

@@ -20,11 +20,20 @@ export class GoogleMapDemo {
 
   center = {lat: 24, lng: 12};
   zoom = 4;
+  display?: google.maps.LatLngLiteral;
 
   constructor(httpClient: HttpClient) {
     httpClient.jsonp('https://maps.googleapis.com/maps/api/js?', 'callback')
       .subscribe(() => {
         this.isReady = true;
       });
   }
+
+  handleClick(event: google.maps.MouseEvent) {
+    this.center = event.latLng.toJSON();
+  }
+
+  handleMove(event: google.maps.MouseEvent) {
+    this.display = event.latLng.toJSON();
+  }
 }

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

@@ -2,16 +2,37 @@ import {Component} from '@angular/core';
 import {async, TestBed} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 
-import {DEFAULT_HEIGHT, DEFAULT_OPTIONS, DEFAULT_WIDTH, GoogleMapModule} from './index';
+import {
+  DEFAULT_HEIGHT,
+  DEFAULT_OPTIONS,
+  DEFAULT_WIDTH,
+  GoogleMap,
+  GoogleMapModule,
+  UpdatedGoogleMap
+} from './index';
 import {
   createMapConstructorSpy,
   createMapSpy,
   TestingWindow
 } from './testing/fake-google-map-utils';
 
+/** Represents boundaries of a map to be used in tests. */
+const testBounds: google.maps.LatLngBoundsLiteral = {
+  east: 12,
+  north: 13,
+  south: 14,
+  west: 15,
+};
+
+/** Represents a latitude/longitude position to be used in tests. */
+const testPosition: google.maps.LatLngLiteral = {
+  lat: 30,
+  lng: 35,
+};
+
 describe('GoogleMap', () => {
   let mapConstructorSpy: jasmine.Spy;
-  let mapSpy: jasmine.SpyObj<google.maps.Map>;
+  let mapSpy: jasmine.SpyObj<UpdatedGoogleMap>;
 
   beforeEach(async(() => {
     TestBed.configureTestingModule({
@@ -31,7 +52,7 @@ describe('GoogleMap', () => {
 
   it('throws an error is the Google Maps JavaScript API was not loaded', () => {
     mapSpy = createMapSpy(DEFAULT_OPTIONS);
-    mapConstructorSpy = createMapConstructorSpy(mapSpy, false);
+    createMapConstructorSpy(mapSpy, false);
 
     expect(() => TestBed.createComponent(TestApp))
         .toThrow(new Error(
@@ -129,6 +150,93 @@ describe('GoogleMap', () => {
     const container = fixture.debugElement.query(By.css('div'));
     expect(mapConstructorSpy).toHaveBeenCalledWith(container.nativeElement, correctedOptions);
   });
+
+  it('exposes methods that change the configuration of the Google Map', () => {
+    mapSpy = createMapSpy(DEFAULT_OPTIONS);
+    createMapConstructorSpy(mapSpy).and.callThrough();
+
+    const fixture = TestBed.createComponent(TestApp);
+    fixture.detectChanges();
+
+    const component = fixture.debugElement.query(By.directive(GoogleMap)).componentInstance;
+
+    component.fitBounds(testBounds, 10);
+    expect(mapSpy.fitBounds).toHaveBeenCalledWith(testBounds, 10);
+
+    component.panBy(12, 13);
+    expect(mapSpy.panBy).toHaveBeenCalledWith(12, 13);
+
+    component.panTo(testPosition);
+    expect(mapSpy.panTo).toHaveBeenCalledWith(testPosition);
+
+    component.panToBounds(testBounds, 10);
+    expect(mapSpy.panToBounds).toHaveBeenCalledWith(testBounds, 10);
+  });
+
+  it('exposes methods that get information about the Google Map', () => {
+    mapSpy = createMapSpy(DEFAULT_OPTIONS);
+    createMapConstructorSpy(mapSpy).and.callThrough();
+
+    const fixture = TestBed.createComponent(TestApp);
+    fixture.detectChanges();
+
+    const component = fixture.debugElement.query(By.directive(GoogleMap)).componentInstance;
+
+    mapSpy.getBounds.and.returnValue(null);
+    expect(component.getBounds()).toBe(null);
+
+    component.getCenter();
+    expect(mapSpy.getCenter).toHaveBeenCalled();
+
+    mapSpy.getClickableIcons.and.returnValue(true);
+    expect(component.getClickableIcons()).toBe(true);
+
+    mapSpy.getHeading.and.returnValue(10);
+    expect(component.getHeading()).toBe(10);
+
+    component.getMapTypeId();
+    expect(mapSpy.getMapTypeId).toHaveBeenCalled();
+
+    mapSpy.getProjection.and.returnValue(null);
+    expect(component.getProjection()).toBe(null);
+
+    component.getStreetView();
+    expect(mapSpy.getStreetView).toHaveBeenCalled();
+
+    mapSpy.getTilt.and.returnValue(7);
+    expect(component.getTilt()).toBe(7);
+
+    mapSpy.getZoom.and.returnValue(5);
+    expect(component.getZoom()).toBe(5);
+  });
+
+  it('initializes event handlers that are set on the map', () => {
+    mapSpy = createMapSpy(DEFAULT_OPTIONS);
+    createMapConstructorSpy(mapSpy).and.callThrough();
+
+    const fixture = TestBed.createComponent(TestApp);
+    fixture.detectChanges();
+
+    expect(mapSpy.addListener).toHaveBeenCalledWith('click', jasmine.any(Function));
+    expect(mapSpy.addListener).toHaveBeenCalledWith('center_changed', jasmine.any(Function));
+    expect(mapSpy.addListener).toHaveBeenCalledWith('rightclick', jasmine.any(Function));
+    expect(mapSpy.addListener).not.toHaveBeenCalledWith('bounds_changed', jasmine.any(Function));
+    expect(mapSpy.addListener).not.toHaveBeenCalledWith('dblclick', jasmine.any(Function));
+    expect(mapSpy.addListener).not.toHaveBeenCalledWith('drag', jasmine.any(Function));
+    expect(mapSpy.addListener).not.toHaveBeenCalledWith('dragend', jasmine.any(Function));
+    expect(mapSpy.addListener).not.toHaveBeenCalledWith('dragstart', jasmine.any(Function));
+    expect(mapSpy.addListener).not.toHaveBeenCalledWith('heading_changed', jasmine.any(Function));
+    expect(mapSpy.addListener).not.toHaveBeenCalledWith('idle', jasmine.any(Function));
+    expect(mapSpy.addListener).not.toHaveBeenCalledWith('maptypeid_changed', jasmine.any(Function));
+    expect(mapSpy.addListener).not.toHaveBeenCalledWith('mousemove', jasmine.any(Function));
+    expect(mapSpy.addListener).not.toHaveBeenCalledWith('mouseout', jasmine.any(Function));
+    expect(mapSpy.addListener).not.toHaveBeenCalledWith('mouseover', jasmine.any(Function));
+    expect(mapSpy.addListener)
+        .not.toHaveBeenCalledWith('projection_changed', jasmine.any(Function));
+    expect(mapSpy.addListener).not.toHaveBeenCalledWith('tilesloaded', jasmine.any(Function));
+    expect(mapSpy.addListener).not.toHaveBeenCalledWith('tilt_changed', jasmine.any(Function));
+    expect(mapSpy.addListener).not.toHaveBeenCalledWith('zoom_changed', jasmine.any(Function));
+  });
 });
 
 @Component({
@@ -137,12 +245,21 @@ describe('GoogleMap', () => {
                          [width]="width"
                          [center]="center"
                          [zoom]="zoom"
-                         [options]="options"></google-map>`,
+                         [options]="options"
+                         (mapClick)="handleClick"
+                         (centerChanged)="handleCenterChanged"
+                         (mapRightclick)="handleRightclick"></google-map>`,
 })
 class TestApp {
   height?: string;
   width?: string;
   center?: google.maps.LatLngLiteral;
   zoom?: number;
   options?: google.maps.MapOptions;
+
+  handleClick(event: google.maps.MouseEvent) {}
+
+  handleCenterChanged() {}
+
+  handleRightclick(event: google.maps.MouseEvent) {}
 }