feat(google-maps): add map-marker component (#16964)

* Refactor google-maps module to have a single entry-point,
@angular/google-maps, instead of a separate one for every component.
* Add GoogleMap and MapMarker components to index for the google maps
module.

Author: mbehrlich

packages.bzl

@@ -80,12 +80,6 @@ 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",

src/dev-app/google-map/BUILD.bazel

@@ -7,7 +7,7 @@ ng_module(
     srcs = glob(["**/*.ts"]),
     assets = ["google-map-demo.html"],
     deps = [
-        "//src/google-maps/google-map",
+        "//src/google-maps",
         "@npm//@angular/router",
     ],
 )

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

@@ -9,15 +9,15 @@
 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 {GoogleMapsModule} from '@angular/google-maps';
 import {RouterModule} from '@angular/router';
 
 import {GoogleMapDemo} from './google-map-demo';
 
 @NgModule({
   imports: [
     CommonModule,
-    GoogleMapModule,
+    GoogleMapsModule,
     HttpClientJsonpModule,
     HttpClientModule,
     RouterModule.forChild([{path: '', component: GoogleMapDemo}]),

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

@@ -4,7 +4,14 @@
             [center]="center"
             [zoom]="zoom"
             (mapClick)="handleClick($event)"
-            (mapMousemove)="handleMove($event)"></google-map>
+            (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>
+</google-map>
 
 <div>Latitude: {{display?.lat}}</div>
 <div>Longitude: {{display?.lng}}</div>

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

@@ -19,6 +19,8 @@ export class GoogleMapDemo {
   isReady = false;
 
   center = {lat: 24, lng: 12};
+  markerOptions = {draggable: false};
+  markerPositions: google.maps.LatLngLiteral[] = [];
   zoom = 4;
   display?: google.maps.LatLngLiteral;
 
@@ -30,10 +32,19 @@ export class GoogleMapDemo {
   }
 
   handleClick(event: google.maps.MouseEvent) {
-    this.center = event.latLng.toJSON();
+    this.markerPositions.push(event.latLng.toJSON());
   }
 
   handleMove(event: google.maps.MouseEvent) {
     this.display = event.latLng.toJSON();
   }
+
+  clickMarker(event: google.maps.MouseEvent) {
+    console.log(this.markerOptions);
+    this.markerOptions = {draggable: true};
+  }
+
+  handleRightclick() {
+    this.markerPositions.pop();
+  }
 }

src/dev-app/system-config.js

@@ -55,10 +55,6 @@ var MATERIAL_PACKAGES = [
   'tree',
 ];
 
-var GOOGLE_MAPS_PACKAGES = [
-  'google-map',
-];
-
 var MATERIAL_EXPERIMENTAL_PACKAGES = [
   'mdc-button',
   'mdc-card',
@@ -103,9 +99,7 @@ MATERIAL_EXPERIMENTAL_PACKAGES.forEach(function(pkgName) {
 MATERIAL_PACKAGES.forEach(function(pkgName) {
   configureEntryPoint('material', pkgName);
 });
-GOOGLE_MAPS_PACKAGES.forEach(function(pkgName) {
-  configureEntryPoint('google-maps', pkgName);
-});
+configureEntryPoint('google-maps');
 configureEntryPoint('youtube-player');
 
 /** Configures the specified package and its entry-point. */

src/dev-app/tsconfig.json

@@ -14,7 +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/google-maps": ["../google-maps"],
       "@angular/material-examples": ["../../dist/packages/material-examples"]
     }
   },

src/google-maps/BUILD.bazel

@@ -1,33 +1,34 @@
 package(default_visibility = ["//visibility:public"])
 
-load("//:packages.bzl", "GOOGLE_MAPS_PACKAGES", "GOOGLE_MAPS_TARGETS", "ROLLUP_GLOBALS")
+load("//:packages.bzl", "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] + [
+    deps = [
+        "//src/google-maps/google-map",
+        "//src/google-maps/map-marker",
         "@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,
+    deps = [":google-maps"],
+)
+
+filegroup(
+    name = "source-files",
+    srcs = glob(["**/*.ts"]),
 )

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

@@ -2,7 +2,6 @@ package(default_visibility = ["//visibility:public"])
 
 load(
     "//tools:defaults.bzl",
-    "markdown_to_html",
     "ng_module",
     "ng_test_library",
     "ng_web_test_suite",
@@ -14,8 +13,8 @@ ng_module(
         ["**/*.ts"],
         exclude = ["**/*.spec.ts"],
     ),
-    module_name = "@angular/google-maps/google-map",
     deps = [
+        "//src/google-maps/map-marker",
         "@npm//@angular/core",
         "@npm//@types/googlemaps",
         "@npm//rxjs",
@@ -30,7 +29,8 @@ ng_test_library(
     ),
     deps = [
         ":google-map",
-        "//src/google-maps/google-map/testing",
+        "//src/google-maps/map-marker",
+        "//src/google-maps/testing",
         "@npm//@angular/platform-browser",
     ],
 )
@@ -40,11 +40,6 @@ ng_web_test_suite(
     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

@@ -6,11 +6,13 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
- import {NgModule} from '@angular/core';
- import {GoogleMap} from './google-map';
+import {NgModule} from '@angular/core';
 
- @NgModule({
-   exports: [GoogleMap],
-   declarations: [GoogleMap],
- })
- export class GoogleMapModule {}
+import {GoogleMap} from './google-map';
+
+@NgModule({
+  exports: [GoogleMap],
+  declarations: [GoogleMap],
+})
+export class GoogleMapModule {
+}