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

Add component that implements the Google Maps JavaScript API InfoWindow
that displays on the Google Map and can be anchored to a marker.

Author: mbehrlich

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

@@ -12,6 +12,7 @@ ng_module(
     module_name = "@angular/google-maps",
     deps = [
         "//src/google-maps/google-map",
+        "//src/google-maps/map-info-window",
         "//src/google-maps/map-marker",
         "@npm//@angular/core",
         "@npm//@types/googlemaps",

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

@@ -14,6 +14,7 @@ ng_module(
         exclude = ["**/*.spec.ts"],
     ),
     deps = [
+        "//src/google-maps/map-info-window",
         "//src/google-maps/map-marker",
         "@npm//@angular/core",
         "@npm//@types/googlemaps",
@@ -29,6 +30,7 @@ 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,6 +2,7 @@ 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,
@@ -40,6 +41,7 @@ describe('GoogleMap', () => {
     TestBed.configureTestingModule({
       imports: [
         GoogleMapModule,
+        MapInfoWindowModule,
         MapMarkerModule,
       ],
       declarations: [TestApp],
@@ -254,6 +256,19 @@ 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({
@@ -267,6 +282,7 @@ 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,6 +15,7 @@ import {
 import {BehaviorSubject, combineLatest, Observable, Subject} from 'rxjs';
 import {map, shareReplay, take, takeUntil} from 'rxjs/operators';
 
+import {MapInfoWindow} from '../map-info-window';
 import {MapMarker} from '../map-marker/index';
 
 interface GoogleMapsWindow extends Window {
@@ -179,6 +180,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;
 
@@ -227,7 +230,11 @@ 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() {
@@ -471,4 +478,14 @@ 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/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/BUILD.bazel

@@ -0,0 +1,53 @@
+package(default_visibility = ["//visibility:public"])
+
+load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
+load(
+    "//tools:defaults.bzl",
+    "ng_module",
+    "ng_test_library",
+    "ng_web_test_suite",
+)
+
+ng_module(
+    name = "map-info-window",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = ["**/*.spec.ts"],
+    ),
+    assets = [":map-info-window.css"],
+    deps = [
+        "//src/google-maps/map-marker",
+        "@npm//@angular/core",
+        "@npm//@types/googlemaps",
+        "@npm//rxjs",
+    ],
+)
+
+sass_binary(
+    name = "map-info-window_scss",
+    src = "map-info-window.scss",
+)
+
+ng_test_library(
+    name = "unit_test_sources",
+    srcs = glob(
+        ["**/*.spec.ts"],
+        exclude = ["**/*.e2e.spec.ts"],
+    ),
+    deps = [
+        ":map-info-window",
+        "//src/google-maps/map-marker",
+        "//src/google-maps/testing",
+        "@npm//@angular/platform-browser",
+    ],
+)
+
+ng_web_test_suite(
+    name = "unit_tests",
+    deps = [":unit_test_sources"],
+)
+
+filegroup(
+    name = "source-files",
+    srcs = glob(["**/*.ts"]),
+)

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.scss

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