feat(google-maps): Add map-marker component

Make various fixes internal cleanup fixes. Change google-map-marker
to map-marker. Use QueryList's changes property instead of a setter
for ContentChildren.

Author: mbehrlich

packages.bzl

@@ -82,7 +82,6 @@ MATERIAL_SCSS_LIBS = [
 
 GOOGLE_MAPS_PACKAGES = [
     "google-map",
-    "google-map-marker",
 ]
 
 GOOGLE_MAPS_TARGETS = ["//src/google-maps"] + ["//src/google-maps/%s" % p for p in GOOGLE_MAPS_PACKAGES]

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

@@ -8,7 +8,6 @@ ng_module(
     assets = ["google-map-demo.html"],
     deps = [
         "//src/google-maps/google-map",
-        "//src/google-maps/google-map-marker",
         "@npm//@angular/router",
     ],
 )

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

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

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

@@ -4,10 +4,13 @@
             [center]="center"
             [zoom]="zoom"
             (mapClick)="handleClick($event)"
-            (mapMousemove)="handleMove($event)">
-  <google-map-marker [position]="markerPosition"
+            (mapMousemove)="handleMove($event)"
+            (mapRightclick)="handleRightclick()">
+  <map-marker></map-marker>
+  <map-marker *ngFor="let markerPosition of markerPositions"
+                     [position]="markerPosition"
                      [options]="markerOptions"
-                     (mapClick)="clickMarker($event)"></google-map-marker>
+                     (mapClick)="clickMarker($event)"></map-marker>
 </google-map>
 
 <div>Latitude: {{display?.lat}}</div>

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

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

src/dev-app/system-config.js

@@ -57,7 +57,6 @@ var MATERIAL_PACKAGES = [
 
 var GOOGLE_MAPS_PACKAGES = [
   'google-map',
-  'google-map-marker',
 ];
 
 var MATERIAL_EXPERIMENTAL_PACKAGES = [

src/google-maps/BUILD.bazel

@@ -12,6 +12,7 @@ ng_module(
     ),
     module_name = "@angular/google-maps",
     deps = ["//src/google-maps/%s" % p for p in GOOGLE_MAPS_PACKAGES] + [
+        "//src/google-maps/map-marker",
         "@npm//@angular/core",
         "@npm//@types/googlemaps",
     ],