fix(google-maps): Fix issues with google maps inputs

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

@@ -116,7 +116,8 @@ describe('GoogleMap', () => {
     fixture.componentInstance.zoom = 12;
     fixture.detectChanges();
 
-    expect(mapSpy.setOptions).toHaveBeenCalledWith({center: {lat: 8, lng: 9}, zoom: 12});
+    expect(mapSpy.setCenter).toHaveBeenCalledWith({lat: 8, lng: 9});
+    expect(mapSpy.setZoom).toHaveBeenCalledWith(12);
   });
 
   it('sets map options', () => {

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

@@ -63,7 +63,7 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
   @Input() width = DEFAULT_WIDTH;
 
   @Input()
-  set center(center: google.maps.LatLngLiteral) {
+  set center(center: google.maps.LatLngLiteral|google.maps.LatLng) {
     this._center.next(center);
   }
   @Input()
@@ -191,7 +191,8 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
   private readonly _listeners: google.maps.MapsEventListener[] = [];
 
   private readonly _options = new BehaviorSubject<google.maps.MapOptions>(DEFAULT_OPTIONS);
-  private readonly _center = new BehaviorSubject<google.maps.LatLngLiteral|undefined>(undefined);
+  private readonly _center =
+      new BehaviorSubject<google.maps.LatLngLiteral|google.maps.LatLng|undefined>(undefined);
   private readonly _zoom = new BehaviorSubject<number|undefined>(undefined);
 
   private readonly _destroy = new Subject<void>();
@@ -224,7 +225,9 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
       this._initializeEventHandlers();
     });
 
-    this._watchForOptionsChanges(combinedOptionsChanges);
+    this._watchForOptionsChanges();
+    this._watchForCenterChanges();
+    this._watchForZoomChanges();
   }
 
   ngOnDestroy() {
@@ -404,15 +407,34 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy {
         shareReplay(1));
   }
 
-  private _watchForOptionsChanges(
-      optionsChanges: Observable<google.maps.MapOptions>) {
-    combineLatest([this._googleMapChanges, optionsChanges])
+  private _watchForOptionsChanges() {
+    combineLatest([this._googleMapChanges, this._options])
         .pipe(takeUntil(this._destroy))
         .subscribe(([googleMap, options]) => {
           googleMap.setOptions(options);
         });
   }
 
+  private _watchForCenterChanges() {
+    combineLatest([this._googleMapChanges, this._center])
+        .pipe(takeUntil(this._destroy))
+        .subscribe(([googleMap, center]) => {
+          if (center) {
+            googleMap.setCenter(center);
+          }
+        });
+  }
+
+  private _watchForZoomChanges() {
+    combineLatest([this._googleMapChanges, this._zoom])
+        .pipe(takeUntil(this._destroy))
+        .subscribe(([googleMap, zoom]) => {
+          if (zoom !== undefined) {
+            googleMap.setZoom(zoom);
+          }
+        });
+  }
+
   private _initializeEventHandlers() {
     const eventHandlers = new Map<string, EventEmitter<void>>([
       ['bounds_changed', this.boundsChanged],

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

@@ -36,7 +36,7 @@ export class MapInfoWindow implements OnInit, OnDestroy {
   }
 
   @Input()
-  set position(position: google.maps.LatLngLiteral) {
+  set position(position: google.maps.LatLngLiteral|google.maps.LatLng) {
     this._position.next(position);
   }
 
@@ -74,7 +74,8 @@ export class MapInfoWindow implements OnInit, OnDestroy {
   @Output() zindexChanged = new EventEmitter<void>();
 
   private readonly _options = new BehaviorSubject<google.maps.InfoWindowOptions>({});
-  private readonly _position = new BehaviorSubject<google.maps.LatLngLiteral|undefined>(undefined);
+  private readonly _position =
+      new BehaviorSubject<google.maps.LatLngLiteral|google.maps.LatLng|undefined>(undefined);
 
   private readonly _listeners: google.maps.MapsEventListener[] = [];
 

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

@@ -17,7 +17,7 @@ import {
   ViewEncapsulation
 } from '@angular/core';
 import {BehaviorSubject, combineLatest, Observable, Subject} from 'rxjs';
-import {map, takeUntil} from 'rxjs/operators';
+import {map, take, takeUntil} from 'rxjs/operators';
 
 import {GoogleMap} from '../google-map/google-map';
 
@@ -52,7 +52,7 @@ export class MapMarker implements OnInit, OnDestroy {
   }
 
   @Input()
-  set position(position: google.maps.LatLngLiteral) {
+  set position(position: google.maps.LatLngLiteral|google.maps.LatLng) {
     this._position.next(position);
   }
 
@@ -195,7 +195,8 @@ export class MapMarker implements OnInit, OnDestroy {
   private readonly _options =
       new BehaviorSubject<google.maps.MarkerOptions>(DEFAULT_MARKER_OPTIONS);
   private readonly _title = new BehaviorSubject<string|undefined>(undefined);
-  private readonly _position = new BehaviorSubject<google.maps.LatLngLiteral|undefined>(undefined);
+  private readonly _position =
+      new BehaviorSubject<google.maps.LatLngLiteral|google.maps.LatLng|undefined>(undefined);
   private readonly _label =
       new BehaviorSubject<string|google.maps.MarkerLabel|undefined>(undefined);
   private readonly _clickable = new BehaviorSubject<boolean|undefined>(undefined);
@@ -211,15 +212,17 @@ export class MapMarker implements OnInit, OnDestroy {
   ngOnInit() {
     const combinedOptionsChanges = this._combineOptions();
 
-    combinedOptionsChanges.pipe(takeUntil(this._destroy)).subscribe(options => {
-      if (this._marker) {
-        this._marker.setOptions(options);
-      } else {
-        this._marker = new google.maps.Marker(options);
-        this._marker.setMap(this.googleMap._googleMap);
-        this._initializeEventHandlers();
-      }
+    combinedOptionsChanges.pipe(take(1)).subscribe(options => {
+      this._marker = new google.maps.Marker(options);
+      this._marker.setMap(this.googleMap._googleMap);
+      this._initializeEventHandlers();
     });
+
+    this._watchForOptionsChanges();
+    this._watchForTitleChanges();
+    this._watchForPositionChanges();
+    this._watchForLabelChanges();
+    this._watchForClickableChanges();
   }
 
   ngOnDestroy() {
@@ -344,6 +347,46 @@ export class MapMarker implements OnInit, OnDestroy {
         }));
   }
 
+  private _watchForOptionsChanges() {
+    this._options.pipe(takeUntil(this._destroy)).subscribe(options => {
+      if (this._marker) {
+        this._marker.setOptions(options);
+      }
+    });
+  }
+
+  private _watchForTitleChanges() {
+    this._title.pipe(takeUntil(this._destroy)).subscribe(title => {
+      if (this._marker) {
+        this._marker.setTitle(title !== undefined ? title : null);
+      }
+    });
+  }
+
+  private _watchForPositionChanges() {
+    this._position.pipe(takeUntil(this._destroy)).subscribe(position => {
+      if (this._marker) {
+        this._marker.setPosition(position || null);
+      }
+    });
+  }
+
+  private _watchForLabelChanges() {
+    this._label.pipe(takeUntil(this._destroy)).subscribe(label => {
+      if (this._marker) {
+        this._marker.setLabel(label !== undefined ? label : null);
+      }
+    });
+  }
+
+  private _watchForClickableChanges() {
+    this._clickable.pipe(takeUntil(this._destroy)).subscribe(clickable => {
+      if (this._marker) {
+        this._marker.setClickable(!!clickable);
+      }
+    });
+  }
+
   private _initializeEventHandlers() {
     const eventHandlers = new Map<string, EventEmitter<void>>([
       ['animation_changed', this.animationChanged],

src/google-maps/testing/fake-google-map-utils.ts

@@ -22,9 +22,9 @@ export interface TestingWindow extends Window {
 /** Creates a jasmine.SpyObj for a google.maps.Map. */
 export function createMapSpy(options: google.maps.MapOptions): jasmine.SpyObj<UpdatedGoogleMap> {
   const mapSpy = jasmine.createSpyObj('google.maps.Map', [
-    'setOptions', 'setMap', 'addListener', 'fitBounds', 'panBy', 'panTo', 'panToBounds',
-    'getBounds', 'getCenter', 'getClickableIcons', 'getHeading', 'getMapTypeId', 'getProjection',
-    'getStreetView', 'getTilt', 'getZoom'
+    'setOptions', 'setCenter', 'setZoom', 'setMap', 'addListener', 'fitBounds', 'panBy', 'panTo',
+    'panToBounds', 'getBounds', 'getCenter', 'getClickableIcons', 'getHeading', 'getMapTypeId',
+    'getProjection', 'getStreetView', 'getTilt', 'getZoom'
   ]);
   mapSpy.addListener.and.returnValue({remove: () => {}});
   return mapSpy;