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.

Author: mbehrlich

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

@@ -2,4 +2,5 @@
             height="400px"
             width="750px"
             [center]="center"
-            [zoom]="zoom"></google-map>
+            [zoom]="zoom"
+            (click)="handleClick($event)"></google-map>

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

@@ -27,4 +27,8 @@ export class GoogleMapDemo {
         this.isReady = true;
       });
   }
+
+  handleClick(event: google.maps.MouseEvent) {
+    this.center = event.latLng.toJSON();
+  }
 }

src/google-maps/google-map/BUILD.bazel

@@ -14,6 +14,7 @@ ng_module(
         ["**/*.ts"],
         exclude = ["**/*.spec.ts"],
     ),
+    assets = glob(["**/*.html"]),
     module_name = "@angular/google-maps/google-map",
     deps = [
         "@npm//@angular/core",

src/google-maps/google-map/google-map.html

@@ -0,0 +1,9 @@
+<div class="map-container"
+     (click)="$event.stopPropagation()"
+     (dblclick)="$event.stopPropagation()"
+     (drag)="$event.stopPropagation()"
+     (dragend)="$event.stopPropagation()"
+     (dragstart)="$event.stopPropagation()"
+     (mousemove)="$event.stopPropagation()"
+     (mouseout)="$event.stopPropagation()"
+     (mouseover)="$event.stopPropagation()"></div>

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

@@ -2,16 +2,35 @@ 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';
 
+const TEST_BOUNDS: google.maps.LatLngBoundsLiteral = {
+  east: 12,
+  north: 13,
+  south: 14,
+  west: 15,
+};
+
+const TEST_POSITION: 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 +50,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 +148,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(TEST_BOUNDS, 10);
+    expect(mapSpy.fitBounds).toHaveBeenCalledWith(TEST_BOUNDS, 10);
+
+    component.panBy(12, 13);
+    expect(mapSpy.panBy).toHaveBeenCalledWith(12, 13);
+
+    component.panTo(TEST_POSITION);
+    expect(mapSpy.panTo).toHaveBeenCalledWith(TEST_POSITION);
+
+    component.panToBounds(TEST_BOUNDS, 10);
+    expect(mapSpy.panToBounds).toHaveBeenCalledWith(TEST_BOUNDS, 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 +243,21 @@ describe('GoogleMap', () => {
                          [width]="width"
                          [center]="center"
                          [zoom]="zoom"
-                         [options]="options"></google-map>`,
+                         [options]="options"
+                         (click)="handleClick"
+                         (centerChanged)="handleCenterChanged"
+                         (rightclick)="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) {}
 }