feat(google-maps): add google-map component

Change default location to Colossem, change map element
view child to not be a stream. Minor style changes.

Author: mbehrlich

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

@@ -1,3 +1 @@
-<div *ngIf="ready">
-  <google-map></google-map>
-</div>
+<google-map *ngIf="ready"></google-map>

src/google-maps/google-map/google-map.spec.ts

@@ -6,8 +6,8 @@ import {createMapConstructorSpy, createMapSpy} from './testing/fake-google-map-u
 import {GoogleMapModule} from './index';
 
 const DEFAULT_OPTIONS: google.maps.MapOptions = {
-  center: {lat: 50, lng: 50},
-  zoom: 4,
+  center: {lat: 41.890150, lng: 12.492231},
+  zoom: 16,
 };
 
 describe('GoogleMap', () => {

src/google-maps/google-map/google-map.ts

@@ -7,7 +7,6 @@ import {
   ViewChild,
 } from '@angular/core';
 import {ReplaySubject} from 'rxjs';
-import {take} from 'rxjs/operators';
 
 /**
  * Angular component that renders a Google Map via the Google Maps JavaScript
@@ -20,30 +19,28 @@ import {take} from 'rxjs/operators';
   template: '<div #map></div>',
 })
 export class GoogleMap implements OnInit {
+  // Arbitrarily chosen default size
   @Input() height = '500px';
   @Input() width = '500px';
+
   // TODO(mbehrlich): add options, handlers, properties, and methods.
 
-  @ViewChild('map', {static: true}) set mapEl(mapEl: ElementRef) {
-    this._mapEl$.next(mapEl);
-  }
+  @ViewChild('map', {static: true}) mapElRef: ElementRef;
 
-  private readonly _mapEl$ = new ReplaySubject<ElementRef>(1);
   private readonly _map$ = new ReplaySubject<google.maps.Map>(1);
 
   ngOnInit() {
     // default options for now
     const options: google.maps.MapOptions = {
-      center: {lat: 50, lng: 50},
-      zoom: 4,
+      center: {lat: 41.890150, lng: 12.492231},
+      zoom: 16,
     };
 
-    this._mapEl$.pipe(take(1)).subscribe(mapElRef => {
-      const mapEl = mapElRef.nativeElement;
-      mapEl.style.height = this.height;
-      mapEl.style.width = this.width;
-      const map = new google.maps.Map(mapEl, options);
-      this._map$.next(map);
-    });
+
+    const mapEl = this.mapElRef.nativeElement;
+    mapEl.style.height = this.height;
+    mapEl.style.width = this.width;
+    const map = new google.maps.Map(mapEl, options);
+    this._map$.next(map);
   }
 }