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

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) {}
 }