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