feat(google-maps): Add map-info-window component

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

@@ -7,10 +7,12 @@
             (mapMousemove)="handleMove($event)"
             (mapRightclick)="handleRightclick()">
   <map-marker></map-marker>
-  <map-marker *ngFor="let markerPosition of markerPositions"
-                     [position]="markerPosition"
-                     [options]="markerOptions"
-                     (mapClick)="clickMarker($event)"></map-marker>
+  <map-marker #marker
+              *ngFor="let markerPosition of markerPositions"
+              [position]="markerPosition"
+              [options]="markerOptions"
+              (mapClick)="clickMarker(marker)"></map-marker>
+  <map-info-window [position]="infoWindowPosition">Testing 1 2 3</map-info-window>
 </google-map>
 
 <div>Latitude: {{display?.lat}}</div>

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

@@ -6,8 +6,9 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Component} from '@angular/core';
 import {HttpClient} from '@angular/common/http';
+import {Component, ViewChild} from '@angular/core';
+import {MapInfoWindow, MapMarker} from '@angular/google-maps';
 
 /** Demo Component for @angular/google-maps/map */
 @Component({
@@ -16,11 +17,14 @@ import {HttpClient} from '@angular/common/http';
   templateUrl: 'google-map-demo.html',
 })
 export class GoogleMapDemo {
+  @ViewChild(MapInfoWindow, {static: false}) infoWindow: MapInfoWindow;
+
   isReady = false;
 
   center = {lat: 24, lng: 12};
   markerOptions = {draggable: false};
   markerPositions: google.maps.LatLngLiteral[] = [];
+  infoWindowPosition: google.maps.LatLngLiteral;
   zoom = 4;
   display?: google.maps.LatLngLiteral;
 
@@ -39,9 +43,8 @@ export class GoogleMapDemo {
     this.display = event.latLng.toJSON();
   }
 
-  clickMarker(event: google.maps.MouseEvent) {
-    console.log(this.markerOptions);
-    this.markerOptions = {draggable: true};
+  clickMarker(marker: MapMarker) {
+    this.infoWindow.open(marker);
   }
 
   handleRightclick() {

src/google-maps/BUILD.bazel

@@ -13,6 +13,7 @@ ng_module(
     deps = [
         "@npm//@angular/core",
         "@npm//@types/googlemaps",
+        "@npm//rxjs",
     ],
 )
 

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

@@ -191,7 +191,7 @@ export class GoogleMap implements OnChanges, OnInit, AfterContentInit, OnDestroy
   @ContentChildren(MapMarker) _markers: QueryList<MapMarker>;
 
   private _mapEl: HTMLElement;
-  private _googleMap!: UpdatedGoogleMap;
+  _googleMap!: UpdatedGoogleMap;
 
   private _googleMapChanges!: Observable<google.maps.Map>;
 

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

@@ -8,16 +8,19 @@
 
 import {NgModule} from '@angular/core';
 
-import {MapMarker, MapMarkerModule} from './map-marker/index';
 import {GoogleMap, GoogleMapModule} from './google-map/index';
+import {MapInfoWindow, MapInfoWindowModule} from './map-info-window/index';
+import {MapMarker, MapMarkerModule} from './map-marker/index';
 
 @NgModule({
   imports: [
     GoogleMapModule,
+    MapInfoWindowModule,
     MapMarkerModule,
   ],
   exports: [
     GoogleMap,
+    MapInfoWindow,
     MapMarker,
   ],
 })

src/google-maps/map-info-window/index.ts

@@ -0,0 +1,10 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+export * from './map-info-window';
+export * from './map-info-window-module';

src/google-maps/map-info-window/map-info-window-module.ts

@@ -0,0 +1,17 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {NgModule} from '@angular/core';
+import {MapInfoWindow} from './map-info-window';
+
+@NgModule({
+  exports: [MapInfoWindow],
+  declarations: [MapInfoWindow],
+})
+export class MapInfoWindowModule {
+}

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

@@ -0,0 +1,185 @@
+import {Component} from '@angular/core';
+import {async, TestBed} from '@angular/core/testing';
+import {By} from '@angular/platform-browser';
+
+import {DEFAULT_OPTIONS, GoogleMapModule, UpdatedGoogleMap} from '../google-map/index';
+import {MapMarker} from '../map-marker/index';
+import {
+  createInfoWindowConstructorSpy,
+  createInfoWindowSpy,
+  createMapConstructorSpy,
+  createMapSpy,
+  TestingWindow
+} from '../testing/fake-google-map-utils';
+
+import {MapInfoWindow, MapInfoWindowModule} from './index';
+
+describe('MapInfoWindow', () => {
+  let mapSpy: jasmine.SpyObj<UpdatedGoogleMap>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      imports: [
+        GoogleMapModule,
+        MapInfoWindowModule,
+      ],
+      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 Info Window', () => {
+    const infoWindowSpy = createInfoWindowSpy({});
+    const infoWindowConstructorSpy =
+        createInfoWindowConstructorSpy(infoWindowSpy).and.callThrough();
+
+    const fixture = TestBed.createComponent(TestApp);
+    fixture.detectChanges();
+
+    expect(infoWindowConstructorSpy).toHaveBeenCalledWith({
+      position: undefined,
+      content: jasmine.any(Node),
+    });
+  });
+
+  it('sets position', () => {
+    const position: google.maps.LatLngLiteral = {lat: 5, lng: 7};
+    const infoWindowSpy = createInfoWindowSpy({position});
+    const infoWindowConstructorSpy =
+        createInfoWindowConstructorSpy(infoWindowSpy).and.callThrough();
+
+    const fixture = TestBed.createComponent(TestApp);
+    fixture.componentInstance.position = position;
+    fixture.detectChanges();
+
+    expect(infoWindowConstructorSpy).toHaveBeenCalledWith({
+      position,
+      content: jasmine.any(Node),
+    });
+  });
+
+  it('sets options', () => {
+    const options: google.maps.InfoWindowOptions = {
+      position: {lat: 3, lng: 5},
+      maxWidth: 50,
+      disableAutoPan: true,
+    };
+    const infoWindowSpy = createInfoWindowSpy(options);
+    const infoWindowConstructorSpy =
+        createInfoWindowConstructorSpy(infoWindowSpy).and.callThrough();
+
+    const fixture = TestBed.createComponent(TestApp);
+    fixture.componentInstance.options = options;
+    fixture.detectChanges();
+
+    expect(infoWindowConstructorSpy).toHaveBeenCalledWith({
+      ...options,
+      content: jasmine.any(Node),
+    });
+  });
+
+  it('gives preference to position over options', () => {
+    const position: google.maps.LatLngLiteral = {lat: 5, lng: 7};
+    const options: google.maps.InfoWindowOptions = {
+      position: {lat: 3, lng: 5},
+      maxWidth: 50,
+      disableAutoPan: true,
+    };
+    const infoWindowSpy = createInfoWindowSpy({...options, position});
+    const infoWindowConstructorSpy =
+        createInfoWindowConstructorSpy(infoWindowSpy).and.callThrough();
+
+    const fixture = TestBed.createComponent(TestApp);
+    fixture.componentInstance.options = options;
+    fixture.componentInstance.position = position;
+    fixture.detectChanges();
+
+    expect(infoWindowConstructorSpy).toHaveBeenCalledWith({
+      ...options,
+      position,
+      content: jasmine.any(Node),
+    });
+  });
+
+  it('exposes methods that change the configuration of the info window', () => {
+    const fakeMarker = {} as unknown as google.maps.Marker;
+    const fakeMarkerComponent = {_marker: fakeMarker} as unknown as MapMarker;
+    const infoWindowSpy = createInfoWindowSpy({});
+    createInfoWindowConstructorSpy(infoWindowSpy).and.callThrough();
+
+    const fixture = TestBed.createComponent(TestApp);
+    const infoWindowComponent = fixture.debugElement.query(By.directive(
+        MapInfoWindow))!.injector.get<MapInfoWindow>(MapInfoWindow);
+    fixture.detectChanges();
+
+    infoWindowComponent.close();
+    expect(infoWindowSpy.close).toHaveBeenCalled();
+
+    infoWindowComponent.open(fakeMarkerComponent);
+    expect(infoWindowSpy.open).toHaveBeenCalledWith(mapSpy, fakeMarker);
+  });
+
+  it('exposes methods that provide information about the info window', () => {
+    const infoWindowSpy = createInfoWindowSpy({});
+    createInfoWindowConstructorSpy(infoWindowSpy).and.callThrough();
+
+    const fixture = TestBed.createComponent(TestApp);
+    const infoWindowComponent = fixture.debugElement.query(By.directive(
+        MapInfoWindow))!.injector.get<MapInfoWindow>(MapInfoWindow);
+    fixture.detectChanges();
+
+    infoWindowSpy.getContent.and.returnValue('test content');
+    expect(infoWindowComponent.getContent()).toBe('test content');
+
+    infoWindowComponent.getPosition();
+    expect(infoWindowSpy.getPosition).toHaveBeenCalled();
+
+    infoWindowSpy.getZIndex.and.returnValue(5);
+    expect(infoWindowComponent.getZIndex()).toBe(5);
+  });
+
+  it('initializes info window event handlers', () => {
+    const infoWindowSpy = createInfoWindowSpy({});
+    createInfoWindowConstructorSpy(infoWindowSpy).and.callThrough();
+
+    const fixture = TestBed.createComponent(TestApp);
+    fixture.detectChanges();
+
+    expect(infoWindowSpy.addListener).toHaveBeenCalledWith('closeclick', jasmine.any(Function));
+    expect(infoWindowSpy.addListener)
+        .not.toHaveBeenCalledWith('content_changed', jasmine.any(Function));
+    expect(infoWindowSpy.addListener).not.toHaveBeenCalledWith('domready', jasmine.any(Function));
+    expect(infoWindowSpy.addListener)
+        .not.toHaveBeenCalledWith('position_changed', jasmine.any(Function));
+    expect(infoWindowSpy.addListener)
+        .not.toHaveBeenCalledWith('zindex_changed', jasmine.any(Function));
+  });
+});
+
+@Component({
+  selector: 'test-app',
+  template: `<google-map>
+               <map-info-window [position]="position"
+                                [options]="options"
+                                (closeclick)="handleClose()">
+                 test content
+               </map-info-window>
+             </google-map>`,
+})
+class TestApp {
+  position?: google.maps.LatLngLiteral;
+  options?: google.maps.InfoWindowOptions;
+
+  handleClose() {}
+}