demo(google-map): minor clarity tweaks to the dev-app demo (#17647)

- 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

Author: Splaktar

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

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>

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

@@ -0,0 +1,5 @@
+.demo-google-map {
+  label {
+    font-weight: 500;
+  }
+}

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

@@ -13,14 +13,14 @@ 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;
 
   center = {lat: 24, lng: 12};
   markerOptions = {draggable: false};
   markerPositions: google.maps.LatLngLiteral[] = [];
-  infoWindowPosition: google.maps.LatLngLiteral;
   zoom = 4;
   display?: google.maps.LatLngLiteral;