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

Refactor code so that parent map is injected in info window instead of
loading info window in the map.

Author: mbehrlich

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

@@ -14,7 +14,6 @@ ng_module(
         exclude = ["**/*.spec.ts"],
     ),
     deps = [
-        "//src/google-maps/map-info-window",
         "//src/google-maps/map-marker",
         "@npm//@angular/core",
         "@npm//@types/googlemaps",
@@ -30,7 +29,6 @@ ng_test_library(
     ),
     deps = [
         ":google-map",
-        "//src/google-maps/map-info-window",
         "//src/google-maps/map-marker",
         "//src/google-maps/testing",
         "@npm//@angular/platform-browser",

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

@@ -2,7 +2,6 @@ import {Component} from '@angular/core';
 import {async, TestBed} from '@angular/core/testing';
 import {By} from '@angular/platform-browser';
 
-import {MapInfoWindow, MapInfoWindowModule} from '../map-info-window/index';
 import {MapMarker, MapMarkerModule} from '../map-marker/index';
 import {
   createMapConstructorSpy,
@@ -41,7 +40,6 @@ describe('GoogleMap', () => {
     TestBed.configureTestingModule({
       imports: [
         GoogleMapModule,
-        MapInfoWindowModule,
         MapMarkerModule,
       ],
       declarations: [TestApp],
@@ -256,19 +254,6 @@ describe('GoogleMap', () => {
 
     expect(markerComponent._setMap).toHaveBeenCalledWith(mapSpy);
   });
-
-  it('calls setMap on child info window components', () => {
-    mapSpy = createMapSpy(DEFAULT_OPTIONS);
-    createMapConstructorSpy(mapSpy).and.callThrough();
-
-    const fixture = TestBed.createComponent(TestApp);
-    const infoWindowComponent =
-        fixture.debugElement.query(By.directive(MapInfoWindow)).componentInstance;
-    spyOn(infoWindowComponent, '_setMap').and.callThrough();
-    fixture.detectChanges();
-
-    expect(infoWindowComponent._setMap).toHaveBeenCalledWith(mapSpy);
-  });
 });
 
 @Component({
@@ -282,7 +267,6 @@ describe('GoogleMap', () => {
                          (centerChanged)="handleCenterChanged()"
                          (mapRightclick)="handleRightclick($event)">
               <map-marker></map-marker>
-              <map-info-window>test content</map-info-window>
             </google-map>`,
 })
 class TestApp {

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

@@ -15,7 +15,6 @@ import {
 import {BehaviorSubject, combineLatest, Observable, Subject} from 'rxjs';
 import {map, shareReplay, take, takeUntil} from 'rxjs/operators';
 
-import {MapInfoWindow} from '../map-info-window/index';
 import {MapMarker} from '../map-marker/index';
 
 interface GoogleMapsWindow extends Window {
@@ -180,10 +179,8 @@ export class GoogleMap implements OnChanges, OnInit, AfterContentInit, OnDestroy
 
   @ContentChildren(MapMarker) _markers: QueryList<MapMarker>;
 
-  @ContentChildren(MapInfoWindow) _infoWindows: QueryList<MapInfoWindow>;
-
   private _mapEl: HTMLElement;
-  private _googleMap!: UpdatedGoogleMap;
+  _googleMap!: UpdatedGoogleMap;
 
   private _googleMapChanges!: Observable<google.maps.Map>;
 
@@ -230,11 +227,7 @@ export class GoogleMap implements OnChanges, OnInit, AfterContentInit, OnDestroy
     for (const marker of this._markers.toArray()) {
       marker._setMap(this._googleMap);
     }
-    for (const infoWindow of this._infoWindows.toArray()) {
-      infoWindow._setMap(this._googleMap);
-    }
     this._watchForMarkerChanges();
-    this._watchForInfoWindowChanges();
   }
 
   ngOnDestroy() {
@@ -478,14 +471,4 @@ export class GoogleMap implements OnChanges, OnInit, AfterContentInit, OnDestroy
           }
         });
   }
-
-  private _watchForInfoWindowChanges() {
-    combineLatest(this._googleMapChanges, this._infoWindows.changes)
-        .pipe(takeUntil(this._destroy))
-        .subscribe(([googleMap, infoWindows]) => {
-          for (let infoWindow of infoWindows) {
-            infoWindow._setMap(googleMap);
-          }
-        });
-  }
 }

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

@@ -16,6 +16,7 @@ ng_module(
     ),
     assets = [":map-info-window.css"],
     deps = [
+        "//src/google-maps/google-map",
         "//src/google-maps/map-marker",
         "@npm//@angular/core",
         "@npm//@types/googlemaps",
@@ -36,6 +37,7 @@ ng_test_library(
     ),
     deps = [
         ":map-info-window",
+        "//src/google-maps/google-map",
         "//src/google-maps/map-marker",
         "//src/google-maps/testing",
         "@npm//@angular/platform-browser",

src/google-maps/map-info-window/map-info-window.scss

@@ -1,4 +1,4 @@
-:host {
+.map-info-window-container {
   .map-info-window-content {
     display: none;
   }

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

@@ -2,25 +2,36 @@ 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: [MapInfoWindowModule],
+      imports: [
+        GoogleMapModule,
+        MapInfoWindowModule,
+      ],
       declarations: [TestApp],
     });
   }));
 
   beforeEach(() => {
     TestBed.compileComponents();
+
+    mapSpy = createMapSpy(DEFAULT_OPTIONS);
+    createMapConstructorSpy(mapSpy).and.callThrough();
   });
 
   afterEach(() => {
@@ -34,10 +45,6 @@ describe('MapInfoWindow', () => {
         createInfoWindowConstructorSpy(infoWindowSpy).and.callThrough();
 
     const fixture = TestBed.createComponent(TestApp);
-    const fakeMap = {} as unknown as google.maps.Map;
-    const infoWindowComponent =
-        fixture.debugElement.query(By.directive(MapInfoWindow)).componentInstance;
-    infoWindowComponent._setMap(fakeMap);
     fixture.detectChanges();
 
     expect(infoWindowConstructorSpy).toHaveBeenCalledWith({
@@ -47,17 +54,13 @@ describe('MapInfoWindow', () => {
   });
 
   it('sets position', () => {
-    const fakeMap = {} as unknown as google.maps.Map;
     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;
-    const infoWindowComponent =
-        fixture.debugElement.query(By.directive(MapInfoWindow)).componentInstance;
-    infoWindowComponent._setMap(fakeMap);
     fixture.detectChanges();
 
     expect(infoWindowConstructorSpy).toHaveBeenCalledWith({
@@ -67,7 +70,6 @@ describe('MapInfoWindow', () => {
   });
 
   it('sets options', () => {
-    const fakeMap = {} as unknown as google.maps.Map;
     const options: google.maps.InfoWindowOptions = {
       position: {lat: 3, lng: 5},
       maxWidth: 50,
@@ -79,9 +81,6 @@ describe('MapInfoWindow', () => {
 
     const fixture = TestBed.createComponent(TestApp);
     fixture.componentInstance.options = options;
-    const infoWindowComponent =
-        fixture.debugElement.query(By.directive(MapInfoWindow)).componentInstance;
-    infoWindowComponent._setMap(fakeMap);
     fixture.detectChanges();
 
     expect(infoWindowConstructorSpy).toHaveBeenCalledWith({
@@ -91,7 +90,6 @@ describe('MapInfoWindow', () => {
   });
 
   it('gives preference to position over options', () => {
-    const fakeMap = {} as unknown as google.maps.Map;
     const position: google.maps.LatLngLiteral = {lat: 5, lng: 7};
     const options: google.maps.InfoWindowOptions = {
       position: {lat: 3, lng: 5},
@@ -105,9 +103,6 @@ describe('MapInfoWindow', () => {
     const fixture = TestBed.createComponent(TestApp);
     fixture.componentInstance.options = options;
     fixture.componentInstance.position = position;
-    const infoWindowComponent =
-        fixture.debugElement.query(By.directive(MapInfoWindow)).componentInstance;
-    infoWindowComponent._setMap(fakeMap);
     fixture.detectChanges();
 
     expect(infoWindowConstructorSpy).toHaveBeenCalledWith({
@@ -117,8 +112,7 @@ describe('MapInfoWindow', () => {
     });
   });
 
-  it('exposes meethods that change the configuration of the info window', () => {
-    const fakeMap = {} as unknown as google.maps.Map;
+  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({});
@@ -127,25 +121,22 @@ describe('MapInfoWindow', () => {
     const fixture = TestBed.createComponent(TestApp);
     const infoWindowComponent =
         fixture.debugElement.query(By.directive(MapInfoWindow)).componentInstance;
-    infoWindowComponent._setMap(fakeMap);
     fixture.detectChanges();
 
     infoWindowComponent.close();
     expect(infoWindowSpy.close).toHaveBeenCalled();
 
     infoWindowComponent.open(fakeMarkerComponent);
-    expect(infoWindowSpy.open).toHaveBeenCalledWith(fakeMap, fakeMarker);
+    expect(infoWindowSpy.open).toHaveBeenCalledWith(mapSpy, fakeMarker);
   });
 
   it('exposes methods that provide information about the info window', () => {
-    const fakeMap = {} as unknown as google.maps.Map;
     const infoWindowSpy = createInfoWindowSpy({});
     createInfoWindowConstructorSpy(infoWindowSpy).and.callThrough();
 
     const fixture = TestBed.createComponent(TestApp);
     const infoWindowComponent =
         fixture.debugElement.query(By.directive(MapInfoWindow)).componentInstance;
-    infoWindowComponent._setMap(fakeMap);
     fixture.detectChanges();
 
     infoWindowSpy.getContent.and.returnValue('test content');
@@ -159,14 +150,10 @@ describe('MapInfoWindow', () => {
   });
 
   it('initializes info window event handlers', () => {
-    const fakeMap = {} as unknown as google.maps.Map;
     const infoWindowSpy = createInfoWindowSpy({});
     createInfoWindowConstructorSpy(infoWindowSpy).and.callThrough();
 
     const fixture = TestBed.createComponent(TestApp);
-    const infoWindowComponent =
-        fixture.debugElement.query(By.directive(MapInfoWindow)).componentInstance;
-    infoWindowComponent._setMap(fakeMap);
     fixture.detectChanges();
 
     expect(infoWindowSpy.addListener).toHaveBeenCalledWith('closeclick', jasmine.any(Function));
@@ -182,9 +169,13 @@ describe('MapInfoWindow', () => {
 
 @Component({
   selector: 'test-app',
-  template: `<map-info-window [position]="position"
-                              [options]="options"
-                              (closeclick)="handleClose()">test content</map-info-window>`,
+  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;

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

@@ -11,6 +11,7 @@ import {
 import {BehaviorSubject, combineLatest, Observable, ReplaySubject, Subject} from 'rxjs';
 import {map, takeUntil} from 'rxjs/operators';
 
+import {GoogleMap} from '../google-map/index';
 import {MapMarker} from '../map-marker/index';
 
 /**
@@ -19,8 +20,10 @@ import {MapMarker} from '../map-marker/index';
  */
 @Component({
   selector: 'map-info-window',
-  template: `<div #infoWindowContent class="map-info-window-content">
-               <ng-content></ng-content>
+  template: `<div class="map-info-window-container">
+               <div #infoWindowContent class="map-info-window-content">
+                 <ng-content></ng-content>
+               </div>
              </div>`,
   styleUrls: ['map-info-window.css'],
 })
@@ -81,9 +84,10 @@ export class MapInfoWindow implements OnInit, OnDestroy {
 
   private readonly _destroy = new Subject<void>();
 
-  private _map?: google.maps.Map;
   private _infoWindow?: google.maps.InfoWindow;
 
+  constructor(private readonly googleMap: GoogleMap) {}
+
   ngOnInit() {
     this._combineOptions().pipe(takeUntil(this._destroy)).subscribe(options => {
       if (this._infoWindow) {
@@ -144,14 +148,8 @@ export class MapInfoWindow implements OnInit, OnDestroy {
    */
   open(anchor?: MapMarker) {
     const marker = anchor ? anchor._marker : undefined;
-    if (this._map) {
-      this._infoWindow!.open(this._map, marker);
-    }
-  }
-
-  _setMap(googleMap: google.maps.Map) {
-    if (!this._map) {
-      this._map = googleMap;
+    if (this.googleMap._googleMap) {
+      this._infoWindow!.open(this.googleMap._googleMap, marker);
     }
   }
 

src/google-maps/testing/fake-google-map-utils.ts

@@ -86,10 +86,14 @@ export function createInfoWindowConstructorSpy(
         return infoWindowSpy;
       });
   const testingWindow: TestingWindow = window;
-  testingWindow.google = {
-    maps: {
-      'InfoWindow': infoWindowConstructorSpy,
-    },
-  };
+  if (testingWindow.google && testingWindow.google.maps) {
+    testingWindow.google.maps['InfoWindow'] = infoWindowConstructorSpy;
+  } else {
+    testingWindow.google = {
+      maps: {
+        'InfoWindow': infoWindowConstructorSpy,
+      },
+    };
+  }
   return infoWindowConstructorSpy;
 }