feat(google-maps): add google-map component skeleton (#16623)

Author: mbehrlich

.github/CODEOWNERS

@@ -58,6 +58,7 @@
 /src/material/core/util/**                         @jelbourn
 
 # Miscellaneous components
+/src/google-maps/**                                @mbehrlich
 /src/youtube-player/**                             @nathantate
 
 # CDK
@@ -141,6 +142,7 @@
 /src/dev-app/expansion/**                          @josephperrott
 /src/dev-app/focus-origin/**                       @mmalerba
 /src/dev-app/gestures/**                           @jelbourn
+/src/dev-app/google-map/**                         @mbehrlich
 /src/dev-app/grid-list/**                          @jelbourn
 /src/dev-app/icon/**                               @jelbourn
 /src/dev-app/input/**                              @mmalerba

package.json

@@ -46,6 +46,7 @@
     "@angular/elements": "^8.1.0",
     "@angular/forms": "^8.1.0",
     "@angular/platform-browser": "^8.1.0",
+    "@types/googlemaps": "^3.37.0",
     "@types/youtube": "^0.0.38",
     "@webcomponents/custom-elements": "^1.1.0",
     "core-js": "^2.6.1",

packages.bzl

@@ -80,6 +80,12 @@ MATERIAL_SCSS_LIBS = [
     for p in MATERIAL_PACKAGES
 ]
 
+GOOGLE_MAPS_PACKAGES = [
+    "google-map",
+]
+
+GOOGLE_MAPS_TARGETS = ["//src/google-maps"] + ["//src/google-maps/%s" % p for p in GOOGLE_MAPS_PACKAGES]
+
 MATERIAL_EXPERIMENTAL_PACKAGES = [
     "mdc-button",
     "mdc-card",
@@ -122,6 +128,7 @@ ROLLUP_GLOBALS = {
     "@angular/material": "ng.material",
     "@angular/material-experimental": "ng.materialExperimental",
     "@angular/youtube-player": "ng.youtubePlayer",
+    "@angular/google-maps": "ng.googleMaps",
 }
 
 # Rollup globals for cdk subpackages in the form of, e.g., {"@angular/cdk/table": "ng.cdk.table"}

src/dev-app/BUILD.bazel

@@ -1,7 +1,7 @@
 package(default_visibility = ["//visibility:public"])
 
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
-load("//:packages.bzl", "CDK_EXPERIMENTAL_TARGETS", "CDK_TARGETS", "MATERIAL_EXPERIMENTAL_SCSS_LIBS", "MATERIAL_EXPERIMENTAL_TARGETS", "MATERIAL_TARGETS")
+load("//:packages.bzl", "CDK_EXPERIMENTAL_TARGETS", "CDK_TARGETS", "GOOGLE_MAPS_TARGETS", "MATERIAL_EXPERIMENTAL_SCSS_LIBS", "MATERIAL_EXPERIMENTAL_TARGETS", "MATERIAL_TARGETS")
 load("//tools:defaults.bzl", "ng_module")
 load("//tools:sass_generate_binaries.bzl", "sass_generate_binaries")
 
@@ -50,7 +50,7 @@ ng_module(
         "//src/material-experimental/mdc-slide-toggle",
         "//src/material-experimental/mdc-tabs",
         "//src/material-examples:examples",
-    ] + CDK_TARGETS + CDK_EXPERIMENTAL_TARGETS + MATERIAL_TARGETS + MATERIAL_EXPERIMENTAL_TARGETS,
+    ] + CDK_TARGETS + CDK_EXPERIMENTAL_TARGETS + MATERIAL_TARGETS + MATERIAL_EXPERIMENTAL_TARGETS + GOOGLE_MAPS_TARGETS,
 )
 
 sass_binary(

src/dev-app/dev-app/dev-app-layout.ts

@@ -41,6 +41,7 @@ export class DevAppLayout {
     {name: 'Expansion Panel', route: '/expansion'},
     {name: 'Focus Origin', route: '/focus-origin'},
     {name: 'Gestures', route: '/gestures'},
+    {name: 'Google Map', route: '/google-map'},
     {name: 'Grid List', route: '/grid-list'},
     {name: 'Icon', route: '/icon'},
     {name: 'Input', route: '/input'},

src/dev-app/dev-app/routes.ts

@@ -40,6 +40,7 @@ export const DEV_APP_ROUTES: Routes = [
     loadChildren: 'focus-origin/focus-origin-demo-module#FocusOriginDemoModule'
   },
   {path: 'gestures', loadChildren: 'gestures/gestures-demo-module#GesturesDemoModule'},
+  {path: 'google-map', loadChildren: 'google-map/google-map-demo-module#GoogleMapDemoModule'},
   {path: 'grid-list', loadChildren: 'grid-list/grid-list-demo-module#GridListDemoModule'},
   {path: 'icon', loadChildren: 'icon/icon-demo-module#IconDemoModule'},
   {path: 'input', loadChildren: 'input/input-demo-module#InputDemoModule'},

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

@@ -0,0 +1,28 @@
+/**
+ * @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 {CommonModule} from '@angular/common';
+import {HttpClientJsonpModule, HttpClientModule} from '@angular/common/http';
+import {NgModule} from '@angular/core';
+import {GoogleMapModule} from '@angular/google-maps/google-map';
+import {RouterModule} from '@angular/router';
+
+import {GoogleMapDemo} from './google-map-demo';
+
+@NgModule({
+  imports: [
+    CommonModule,
+    GoogleMapModule,
+    HttpClientJsonpModule,
+    HttpClientModule,
+    RouterModule.forChild([{path: '', component: GoogleMapDemo}]),
+  ],
+  declarations: [GoogleMapDemo],
+})
+export class GoogleMapDemoModule {
+}

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

@@ -0,0 +1 @@
+<google-map *ngIf="isReady"></google-map>

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

@@ -0,0 +1,27 @@
+/**
+ * @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 {Component} from '@angular/core';
+import {HttpClient} from '@angular/common/http';
+
+/** Demo Component for @angular/google-maps/map */
+@Component({
+  moduleId: module.id,
+  selector: 'google-map-demo',
+  templateUrl: 'google-map-demo.html',
+})
+export class GoogleMapDemo {
+  isReady = false;
+
+  constructor(httpClient: HttpClient) {
+    httpClient.jsonp('https://maps.googleapis.com/maps/api/js?', 'callback')
+      .subscribe(() => {
+        this.isReady = true;
+      });
+  }
+}

src/dev-app/system-config.ts

@@ -153,6 +153,9 @@ System.config({
         'dist/packages/material-experimental/mdc-helpers/index.js',
     '@angular/material-experimental/popover-edit':
         'dist/packages/material-experimental/popover-edit/index.js',
+
+    '@angular/google-maps/google-map':
+        'dist/packages/google-maps/google-map/index.js',
   },
   packages: {
     // Set the default extension for the root package, because otherwise the dev-app can't

src/dev-app/tsconfig-aot.json

@@ -28,6 +28,7 @@
       "@angular/cdk-experimental/*": ["../../dist/releases/cdk-experimental/*"],
       "@angular/cdk-experimental": ["../../dist/releases/cdk-experimental"],
       "@angular/material-moment-adapter": ["../../dist/releases/material-moment-adapter"],
+      "@angular/google-maps/*": ["../../dist/releases/google-maps/*"],
       "@angular/material-examples": ["../../dist/releases/material-examples"]
     }
   },

src/dev-app/tsconfig-build.json

@@ -35,6 +35,7 @@
       "@angular/cdk-experimental/*": ["../../dist/packages/cdk-experimental/*"],
       "@angular/cdk-experimental": ["../../dist/packages/cdk-experimental"],
       "@angular/material-moment-adapter": ["../../dist/packages/material-moment-adapter"],
+      "@angular/google-maps/*": ["../../dist/packages/google-maps/*"],
       "@angular/material-examples": ["../../dist/packages/material-examples"]
     }
   },

src/dev-app/tsconfig.json

@@ -14,6 +14,7 @@
       "@angular/cdk-experimental/*": ["../cdk-experimental/*"],
       "@angular/cdk-experimental": ["../cdk-experimental"],
       "@angular/material-moment-adapter": ["../material-moment-adapter/public-api.ts"],
+      "@angular/google-maps/*": ["../google-maps/*"],
       "@angular/material-examples": ["../../dist/packages/material-examples"]
     }
   },

src/google-maps/BUILD.bazel

@@ -0,0 +1,33 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//:packages.bzl", "GOOGLE_MAPS_PACKAGES", "GOOGLE_MAPS_TARGETS", "ROLLUP_GLOBALS")
+load("//tools:defaults.bzl", "ng_module", "ng_package")
+
+# Root "@angular/google-maps" entry-point that does not re-export individual entry-points.
+ng_module(
+    name = "google-maps",
+    srcs = glob(
+        ["*.ts"],
+        exclude = ["**/*.spec.ts"],
+    ),
+    module_name = "@angular/google-maps",
+    deps = ["//src/google-maps/%s" % p for p in GOOGLE_MAPS_PACKAGES] + [
+        "@npm//@angular/core",
+        "@npm//@types/googlemaps",
+    ],
+)
+
+filegroup(
+    name = "overviews",
+    srcs = ["//src/google-maps/%s:overview" % name for name in GOOGLE_MAPS_PACKAGES],
+)
+
+# Creates the @angular/google-maps package published to npm
+ng_package(
+    name = "npm_package",
+    srcs = ["package.json"],
+    entry_point = ":public-api.ts",
+    entry_point_name = "google-maps",
+    globals = ROLLUP_GLOBALS,
+    deps = GOOGLE_MAPS_TARGETS,
+)

src/google-maps/README.md

@@ -0,0 +1,51 @@
+package(default_visibility = ["//visibility:public"])
+
+load(
+    "//tools:defaults.bzl",
+    "markdown_to_html",
+    "ng_module",
+    "ng_test_library",
+    "ng_web_test_suite",
+)
+
+ng_module(
+    name = "google-map",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = ["**/*.spec.ts"],
+    ),
+    module_name = "@angular/google-maps/google-map",
+    deps = [
+        "@npm//@angular/core",
+        "@npm//@types/googlemaps",
+        "@npm//rxjs",
+    ],
+)
+
+ng_test_library(
+    name = "unit_test_sources",
+    srcs = glob(
+        ["**/*.spec.ts"],
+        exclude = ["**/*.e2e.spec.ts"],
+    ),
+    deps = [
+        ":google-map",
+        "//src/google-maps/google-map/testing",
+        "@npm//@angular/platform-browser",
+    ],
+)
+
+ng_web_test_suite(
+    name = "unit_tests",
+    deps = [":unit_test_sources"],
+)
+
+markdown_to_html(
+    name = "overview",
+    srcs = [":google-map.md"],
+)
+
+filegroup(
+    name = "source-files",
+    srcs = glob(["**/*.ts"]),
+)

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

@@ -0,0 +1,16 @@
+/**
+ * @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 {GoogleMap} from './google-map';
+
+ @NgModule({
+   exports: [GoogleMap],
+   declarations: [GoogleMap],
+ })
+ export class GoogleMapModule {}

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

@@ -0,0 +1,44 @@
+import {Component} from '@angular/core';
+import {async, TestBed} from '@angular/core/testing';
+import {By} from '@angular/platform-browser';
+
+import {createMapConstructorSpy, createMapSpy} from './testing/fake-google-map-utils';
+import {GoogleMapModule} from './index';
+
+const DEFAULT_OPTIONS: google.maps.MapOptions = {
+  center: {lat: 37.421995, lng: -122.084092},
+  zoom: 17,
+};
+
+describe('GoogleMap', () => {
+  let mapConstructorSpy: jasmine.Spy;
+  let mapSpy: jasmine.SpyObj<google.maps.Map>;
+
+  beforeEach(async(() => {
+    mapSpy = createMapSpy(DEFAULT_OPTIONS);
+    mapConstructorSpy = createMapConstructorSpy(mapSpy);
+
+    TestBed.configureTestingModule({
+      imports: [GoogleMapModule],
+      declarations: [TestApp],
+    });
+  }));
+
+  beforeEach(() => {
+    TestBed.compileComponents();
+  });
+
+  it('initializes a Google map', () => {
+    const fixture = TestBed.createComponent(TestApp);
+    const container = fixture.debugElement.query(By.css('div'));
+    fixture.detectChanges();
+
+    expect(mapConstructorSpy).toHaveBeenCalledWith(container.nativeElement, DEFAULT_OPTIONS);
+  });
+});
+
+@Component({
+  selector: 'test-app',
+  template: `<google-map></google-map>`,
+})
+class TestApp {}

src/google-maps/google-map/google-map.md

@@ -0,0 +1,44 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  ElementRef,
+  Input,
+  OnInit,
+} from '@angular/core';
+import {ReplaySubject} from 'rxjs';
+
+/**
+ * Angular component that renders a Google Map via the Google Maps JavaScript
+ * API.
+ * @see https://developers.google.com/maps/documentation/javascript/reference/
+ */
+@Component({
+  selector: 'google-map',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<div class="map-container"></div>',
+})
+export class GoogleMap implements OnInit {
+  // Arbitrarily chosen default size
+  @Input() height = '500px';
+  @Input() width = '500px';
+
+  // TODO(mbehrlich): add options, handlers, properties, and methods.
+
+  private readonly _map$ = new ReplaySubject<google.maps.Map>(1);
+
+  constructor(private readonly _elementRef: ElementRef) {}
+
+  ngOnInit() {
+    // default options set to the Googleplex
+    const options: google.maps.MapOptions = {
+      center: {lat: 37.421995, lng: -122.084092},
+      zoom: 17,
+    };
+
+    const mapEl = this._elementRef.nativeElement.querySelector('.map-container');
+    mapEl.style.height = this.height;
+    mapEl.style.width = this.width;
+    const map = new google.maps.Map(mapEl, options);
+    this._map$.next(map);
+  }
+}

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

@@ -0,0 +1,9 @@
+/**
+ * @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 './public-api';

src/google-maps/google-map/google-map.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 './google-map-module';
+export * from './google-map';

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

@@ -0,0 +1,13 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//tools:defaults.bzl", "ts_library")
+
+ts_library(
+    name = "testing",
+    testonly = 1,
+    srcs = glob(["**/*.ts"]),
+    deps = [
+        "@npm//@types/googlemaps",
+        "@npm//@types/jasmine",
+    ],
+)