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

.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/google-map/BUILD.bazel

@@ -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/google-map-module.ts

@@ -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.spec.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.ts

@@ -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/index.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/public-api.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/testing/BUILD.bazel

@@ -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",
+    ],
+)

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

@@ -0,0 +1,28 @@
+declare global {
+  interface Window {
+    google?: {
+      maps: {
+        Map: jasmine.Spy;
+      };
+    };
+  }
+}
+
+/** Creates a jasmine.SpyObj for a google.maps.Map. */
+export function createMapSpy(options: google.maps.MapOptions): jasmine.SpyObj<google.maps.Map> {
+  return jasmine.createSpyObj('Map', ['getDiv']);
+}
+
+/** Creates a jasmine.Spy to watch for the constructor of a google.maps.Map. */
+export function createMapConstructorSpy(mapSpy: jasmine.SpyObj<google.maps.Map>): jasmine.Spy {
+  const mapConstructorSpy =
+      jasmine.createSpy('Map constructor', (_el: Element, _options: google.maps.MapOptions) => {
+        return mapSpy;
+      });
+  window.google = {
+    maps: {
+      'Map': mapConstructorSpy,
+    }
+  };
+  return mapConstructorSpy;
+}

src/google-maps/google-map/tsconfig-build.json

@@ -0,0 +1,15 @@
+{
+  "extends": "../tsconfig-build",
+  "files": [
+    "public-api.ts",
+    "../typings.d.ts"
+  ],
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "strictMetadataEmit": true,
+    "flatModuleOutFile": "index.js",
+    "flatModuleId": "@angular/google-maps/google-map",
+    "skipTemplateCodegen": true,
+    "fullTemplateTypeCheck": true
+  }
+}

src/google-maps/index.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/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@angular/google-maps",
+  "version": "0.0.0-PLACEHOLDER",
+  "description": "Angular Google Maps",
+  "main": "./bundles/google-maps.umd.js",
+  "module": "./esm5/google-maps.es5.js",
+  "es2015": "./esm2015/google-maps.js",
+  "typings": "./google-maps.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/angular/components.git"
+  },
+  "keywords": [
+    "angular",
+    "components",
+    "google-maps"
+  ],
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/angular/components/issues"
+  },
+  "homepage": "https://github.com/angular/components/tree/master/src/google-maps#readme",
+  "dependencies": {
+    "@types/googlemaps": "^3.37.0"
+  },
+  "peerDependencies": {
+    "@angular/core": "0.0.0-NG",
+    "@angular/common": "0.0.0-NG"
+  },
+  "sideEffects": false
+}

src/google-maps/public-api.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 '@angular/google-maps/google-map';

src/google-maps/tsconfig-build.json

@@ -0,0 +1,34 @@
+// TypeScript config file that is used to compile the Google Maps package through Gulp. As the
+// long term goal is to switch to Bazel, and we already want to run tests with Bazel, we need to
+// ensure the TypeScript build options are the same for Gulp and Bazel. We achieve this by
+// extending the generic Bazel build tsconfig which will be used for each entry-point.
+{
+  "extends": "../bazel-tsconfig-build.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "outDir": "../../dist/packages/google-maps",
+    "rootDir": ".",
+    "rootDirs": [
+      ".",
+      "../../dist/packages/google-maps"
+    ],
+    "paths": {
+      "@angular/google-maps/*": ["../../dist/packages/google-maps/*"]
+    },
+    "types": [
+      "googlemaps"
+    ]
+  },
+  "files": [
+    "public-api.ts",
+    "typings.d.ts"
+  ],
+  "angularCompilerOptions": {
+    "annotateForClosureCompiler": true,
+    "strictMetadataEmit": true,
+    "flatModuleOutFile": "index.js",
+    "flatModuleId": "@angular/google-maps",
+    "skipTemplateCodegen": true,
+    "fullTemplateTypeCheck": true
+  }
+}

src/google-maps/tsconfig-tests.json

@@ -0,0 +1,36 @@
+// TypeScript config file that extends the default tsconfig file for the library. This config is
+// used to compile the tests for Karma. Since the code will run inside of the browser, the target
+// needs to be ES5. The format needs to be CommonJS since Karma only supports that module format.
+{
+  "extends": "./tsconfig-build",
+  "compilerOptions": {
+    "importHelpers": false,
+    "module": "commonjs",
+    "target": "es5",
+    "types": [
+      "jasmine",
+      "googlemaps"
+    ],
+    "paths": {
+      "@angular/google-maps/*": ["./*"]
+    }
+  },
+  "angularCompilerOptions": {
+    "strictMetadataEmit": true,
+    "skipTemplateCodegen": true,
+    "emitDecoratorMetadata": true,
+    "fullTemplateTypeCheck": true,
+    // Unset options inherited from tsconfig-build
+    "annotateForClosureCompiler": false,
+    "flatModuleOutFile": null,
+    "flatModuleId": null
+  },
+  "include": [
+    "**/*.spec.ts",
+    "index.ts"
+  ],
+  "exclude": [
+    "**/schematics/**/*.ts",
+    "**/*.e2e.spec.ts"
+  ]
+}

src/google-maps/tsconfig.json

@@ -0,0 +1,18 @@
+// Configuration for IDEs only.
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "..",
+    "baseUrl": ".",
+    "paths": {
+      "@angular/google-maps": ["./*"]
+    },
+    "types": [
+      "jasmine",
+      "googlemaps"
+    ]
+  },
+  "include": [
+    "./**/*.ts"
+  ]
+}

src/google-maps/typings.d.ts

@@ -0,0 +1 @@
+declare var module: {id: string};

tools/gulp/gulpfile.ts

@@ -5,6 +5,7 @@ import {
   cdkExperimentalPackage,
   cdkPackage,
   examplesPackage,
+  googleMapsPackage,
   materialExperimentalPackage,
   materialPackage,
   momentAdapterPackage,
@@ -18,6 +19,7 @@ createPackageBuildTasks(materialExperimentalPackage);
 createPackageBuildTasks(examplesPackage, ['build-examples-module']);
 createPackageBuildTasks(momentAdapterPackage);
 createPackageBuildTasks(youTubePlayerPackage);
+createPackageBuildTasks(googleMapsPackage);
 
 import './tasks/aot';
 import './tasks/breaking-changes';

tools/gulp/packages.ts

@@ -3,6 +3,7 @@ import {BuildPackage} from 'material2-build-tools';
 export const cdkPackage = new BuildPackage('cdk');
 export const materialPackage = new BuildPackage('material', [cdkPackage]);
 export const youTubePlayerPackage = new BuildPackage('youtube-player');
+export const googleMapsPackage = new BuildPackage('google-maps');
 export const cdkExperimentalPackage = new BuildPackage('cdk-experimental', [cdkPackage]);
 export const materialExperimentalPackage = new BuildPackage('material-experimental',
     [cdkPackage, cdkExperimentalPackage, materialPackage]);
@@ -12,7 +13,8 @@ export const examplesPackage = new BuildPackage('material-examples', [
   cdkExperimentalPackage,
   materialPackage,
   materialExperimentalPackage,
-  momentAdapterPackage
+  momentAdapterPackage,
+  googleMapsPackage,
 ]);
 
 // The material package re-exports its secondary entry-points at the root so that all of the
@@ -37,5 +39,6 @@ export const allBuildPackages = [
   cdkExperimentalPackage,
   materialExperimentalPackage,
   momentAdapterPackage,
+  googleMapsPackage,
   examplesPackage
 ];

tools/gulp/tasks/aot.ts

@@ -36,6 +36,7 @@ task('build-aot:release-packages', sequenceTask(
     'cdk-experimental:build-release',
     'material-experimental:build-release',
     'material-moment-adapter:build-release',
+    'google-maps:build-release',
     'material-examples:build-release',
   ],
 ));

tools/gulp/tasks/development.ts

@@ -14,6 +14,7 @@ import {
   cdkExperimentalPackage,
   materialPackage,
   momentAdapterPackage,
+  googleMapsPackage,
   examplesPackage,
   youTubePlayerPackage,
 } from '../packages';
@@ -67,6 +68,7 @@ task('build:devapp', sequenceTask(
   'material-experimental:build-no-bundles',
   'youtube-player:build-no-bundles',
   'material-moment-adapter:build-no-bundles',
+  'google-maps:build-no-bundles',
   'build-examples-module',
   // The examples module needs to be manually built before building examples package because
   // when using the `no-bundles` task, the package-specific pre-build tasks won't be executed.
@@ -107,6 +109,9 @@ task('stage-deploy:devapp', ['build:devapp'], () => {
     join(deployOutputDir, 'dist/packages/material-examples'));
   copyFiles(momentAdapterPackage.outputDir, '**/*.+(js|map)',
     join(deployOutputDir, 'dist/packages/material-moment-adapter'));
+  copyFiles(
+      googleMapsPackage.outputDir, '**/*.+(js|map)',
+      join(deployOutputDir, 'dist/packages/google-maps'));
 });
 
 /**
@@ -176,6 +181,10 @@ task(':watch:devapp', () => {
   watchFilesAndReload(join(cdkExperimentalPackage.sourceDir, '**/*'),
     ['cdk-experimental:build-no-bundles']);
 
+  // Google Maps package watchers
+  watchFilesAndReload(join(googleMapsPackage.sourceDir, '**/*'),
+    ['google-maps:build-no-bundles']);
+
   // Example package watchers.
   watchFilesAndReload(join(examplesPackage.sourceDir, '**/*'),
     ['material-examples:build-no-bundles']);

tools/gulp/tasks/unit-test.ts

@@ -20,7 +20,8 @@ task(':test:build', sequenceTask(
   'cdk-experimental:build-no-bundles',
   'material-experimental:build-no-bundles',
   'youtube-player:build-no-bundles',
-  'material-moment-adapter:build-no-bundles'
+  'material-moment-adapter:build-no-bundles',
+  'google-maps:build-no-bundles',
 ));
 
 /**

tools/gulp/tasks/universal.ts

@@ -42,6 +42,7 @@ task(
           'cdk-experimental:build-release',
           'material-experimental:build-release',
           'youtube-player:build-release',
+          'google-maps:build-release',
         ],
         ['universal:copy-release', 'universal:copy-files'],
         ['universal:build-app-ts', 'universal:build-app-scss'],
@@ -68,4 +69,5 @@ task('universal:copy-release', () => {
   copySync(join(releasesDir, 'cdk-experimental'), join(outDir, 'cdk-experimental'));
   copySync(join(releasesDir, 'material-experimental'), join(outDir, 'material-experimental'));
   copySync(join(releasesDir, 'youtube-player'), join(outDir, 'youtube-player'));
+  copySync(join(releasesDir, 'google-maps'), join(outDir, 'google-maps'));
 });

tools/package-tools/build-release.ts

@@ -137,6 +137,7 @@ const packageDirs: string[] = [
   'material-experimental',
   'youtube-player',
   'cdk-experimental',
+  'google-maps',
 ];
 
 /**

tools/package-tools/rollup-globals.ts

@@ -22,6 +22,10 @@ const cdkSecondaryEntryPoints = getSubdirectoryNames(join(buildConfig.packagesDi
 /** List of potential secondary entry-points for the material package. */
 const matSecondaryEntryPoints = getSubdirectoryNames(join(buildConfig.packagesDir, 'material'));
 
+/** List of potential secondary entry-points for the google-maps package. */
+const googleMapsSecondaryEntryPoints =
+    getSubdirectoryNames(join(buildConfig.packagesDir, 'google-maps'));
+
 /** List of potential secondary entry-points for the cdk-experimental package. */
 const cdkExperimentalSecondaryEntryPoints =
     getSubdirectoryNames(join(buildConfig.packagesDir, 'cdk-experimental'));
@@ -40,6 +44,10 @@ const rollupCdkEntryPoints = generateRollupEntryPoints('cdk', cdkSecondaryEntryP
 /** Object with all material entry points in the format of Rollup globals. */
 const rollupMatEntryPoints = generateRollupEntryPoints('material', matSecondaryEntryPoints);
 
+/** Object with all google-maps entry points in the format of Rollup globals. */
+const rollupGoogleMapsEntryPoints =
+    generateRollupEntryPoints('google-maps', googleMapsSecondaryEntryPoints);
+
 /** Object with all material-experimental entry points in the format of Rollup globals. */
 const rollupMaterialExperimentalEntryPoints =
     generateRollupEntryPoints('material-experimental', materialExperimentalSecondaryEntryPoints);
@@ -115,6 +123,7 @@ export const rollupGlobals = {
   '@angular/material-moment-adapter': 'ng.materialMomentAdapter',
 
   // Miscellaneous components
+  '@angular/google-maps': 'ng.googleMaps',
   '@angular/youtube-player': 'ng.youtubePlayer',
 
   // Include secondary entry-points of the cdk and material packages
@@ -123,6 +132,7 @@ export const rollupGlobals = {
   ...rollupCdkExperimentalEntryPoints,
   ...rollupMaterialExperimentalEntryPoints,
   ...rollupYouTubePlayerEntryPoints,
+  ...rollupGoogleMapsEntryPoints,
 
   '@angular/cdk/private/testing': 'ng.cdk.private.testing',
   '@angular/cdk/private/testing/e2e': 'ng.cdk.private.testing.e2e',

tools/release/release-output/release-packages.ts

@@ -5,5 +5,6 @@ export const releasePackages = [
   'youtube-player',
   'cdk-experimental',
   'material-experimental',
-  'material-moment-adapter'
+  'material-moment-adapter',
+  'google-maps',
 ];

yarn.lock

@@ -1213,6 +1213,11 @@
     "@types/minimatch" "*"
     "@types/node" "*"
 
+"@types/googlemaps@^3.37.0":
+  version "3.37.0"
+  resolved "https://registry.yarnpkg.com/@types/googlemaps/-/googlemaps-3.37.0.tgz#85596a2b93ded3850ac83ff575b66c34053c0ac8"
+  integrity sha512-kUF1DCVJISf6HZQdgROIs98C0MS40AK5KXxyOju5L1aifNXqMkN5siSGErHYxpEMkDcTA/hu6Dr22fZBTt2qRA==
+
 "@types/gulp-util@^3.0.34":
   version "3.0.34"
   resolved "https://registry.yarnpkg.com/@types/gulp-util/-/gulp-util-3.0.34.tgz#d1291ebf706d93f46eb8df11344bbfd96247697e"