From 1f638addda9481f359adb1e5db5414033dd6d2a4 Mon Sep 17 00:00:00 2001
From: Michael Prentice <splaktar@gmail.com>
Date: Thu, 7 Nov 2019 13:53:40 -0500
Subject: [PATCH] demo(google-map): minor clarity tweaks to the dev-app demo

- remove infoWindowPosition since it is not actually used
  - and passing in undefined to the @Input is a little confusing
  - also it's type doesn't match the position @Input's types
- make the first marker visible on initial load
- make the first marker clickable to make the demo less confusing
- use more semantic HTML
---
 src/dev-app/google-map/BUILD.bazel          | 12 +++++--
 src/dev-app/google-map/google-map-demo.html | 36 +++++++++++----------
 src/dev-app/google-map/google-map-demo.scss |  5 +++
 src/dev-app/google-map/google-map-demo.ts   |  2 +-
 4 files changed, 35 insertions(+), 20 deletions(-)
 create mode 100644 src/dev-app/google-map/google-map-demo.scss

diff --git a/src/dev-app/google-map/BUILD.bazel b/src/dev-app/google-map/BUILD.bazel
index 3b0c062cb3b3..438605e94d18 100644
--- a/src/dev-app/google-map/BUILD.bazel
+++ b/src/dev-app/google-map/BUILD.bazel
@@ -1,13 +1,21 @@
 package(default_visibility = ["//visibility:public"])
 
-load("//tools:defaults.bzl", "ng_module")
+load("//tools:defaults.bzl", "ng_module", "sass_binary")
 
 ng_module(
     name = "google-map",
     srcs = glob(["**/*.ts"]),
-    assets = ["google-map-demo.html"],
+    assets = [
+        "google-map-demo.html",
+        ":google_map_demo_scss",
+    ],
     deps = [
         "//src/google-maps",
         "@npm//@angular/router",
     ],
 )
+
+sass_binary(
+    name = "google_map_demo_scss",
+    src = "google-map-demo.scss",
+)
diff --git a/src/dev-app/google-map/google-map-demo.html b/src/dev-app/google-map/google-map-demo.html
index 51dc0e2b60b3..6a61ea2d35f3 100644
--- a/src/dev-app/google-map/google-map-demo.html
+++ b/src/dev-app/google-map/google-map-demo.html
@@ -1,18 +1,20 @@
-<google-map height="400px"
-            width="750px"
-            [center]="center"
-            [zoom]="zoom"
-            (mapClick)="handleClick($event)"
-            (mapMousemove)="handleMove($event)"
-            (mapRightclick)="handleRightclick()">
-  <map-marker></map-marker>
-  <map-marker #marker
-              *ngFor="let markerPosition of markerPositions"
-              [position]="markerPosition"
-              [options]="markerOptions"
-              (mapClick)="clickMarker(marker)"></map-marker>
-  <map-info-window [position]="infoWindowPosition">Testing 1 2 3</map-info-window>
-</google-map>
+<div class="demo-google-map">
+  <google-map height="400px"
+              width="750px"
+              [center]="center"
+              [zoom]="zoom"
+              (mapClick)="handleClick($event)"
+              (mapMousemove)="handleMove($event)"
+              (mapRightclick)="handleRightclick()">
+    <map-marker #firstMarker [position]="center" (mapClick)="clickMarker(firstMarker)"></map-marker>
+    <map-marker #marker
+                *ngFor="let markerPosition of markerPositions"
+                [position]="markerPosition"
+                [options]="markerOptions"
+                (mapClick)="clickMarker(marker)"></map-marker>
+    <map-info-window>Testing 1 2 3</map-info-window>
+  </google-map>
 
-<div>Latitude: {{display?.lat}}</div>
-<div>Longitude: {{display?.lng}}</div>
+  <p><label>Latitude:</label> {{display?.lat}}</p>
+  <p><label>Longitude:</label> {{display?.lng}}</p>
+</div>
diff --git a/src/dev-app/google-map/google-map-demo.scss b/src/dev-app/google-map/google-map-demo.scss
new file mode 100644
index 000000000000..b310ebb50f73
--- /dev/null
+++ b/src/dev-app/google-map/google-map-demo.scss
@@ -0,0 +1,5 @@
+.demo-google-map {
+  label {
+    font-weight: 500;
+  }
+}
diff --git a/src/dev-app/google-map/google-map-demo.ts b/src/dev-app/google-map/google-map-demo.ts
index aa993095b6c2..23557c8c865d 100644
--- a/src/dev-app/google-map/google-map-demo.ts
+++ b/src/dev-app/google-map/google-map-demo.ts
@@ -13,6 +13,7 @@ import {MapInfoWindow, MapMarker} from '@angular/google-maps';
 @Component({
   selector: 'google-map-demo',
   templateUrl: 'google-map-demo.html',
+  styleUrls: ['google-map-demo.css']
 })
 export class GoogleMapDemo {
   @ViewChild(MapInfoWindow) infoWindow: MapInfoWindow;
@@ -20,7 +21,6 @@ export class GoogleMapDemo {
   center = {lat: 24, lng: 12};
   markerOptions = {draggable: false};
   markerPositions: google.maps.LatLngLiteral[] = [];
-  infoWindowPosition: google.maps.LatLngLiteral;
   zoom = 4;
   display?: google.maps.LatLngLiteral;