diff --git a/src/google-maps/google-map/google-map.ts b/src/google-maps/google-map/google-map.ts index e152a9a5e594..f63c0e152386 100644 --- a/src/google-maps/google-map/google-map.ts +++ b/src/google-maps/google-map/google-map.ts @@ -65,9 +65,6 @@ export const DEFAULT_WIDTH = '500px'; }) export class GoogleMap implements OnChanges, OnInit, OnDestroy { private _eventManager = new MapEventManager(); - - /** Whether we're currently rendering inside a browser. */ - private _isBrowser: boolean; private _googleMapChanges: Observable; private readonly _options = new BehaviorSubject(DEFAULT_OPTIONS); @@ -78,6 +75,9 @@ export class GoogleMap implements OnChanges, OnInit, OnDestroy { private _mapEl: HTMLElement; _googleMap: UpdatedGoogleMap; + /** Whether we're currently rendering inside a browser. */ + _isBrowser: boolean; + @Input() height: string | number = DEFAULT_HEIGHT; @Input() width: string | number = DEFAULT_WIDTH; diff --git a/src/google-maps/map-info-window/map-info-window.ts b/src/google-maps/map-info-window/map-info-window.ts index f84d293839f0..fafcbe9663c9 100644 --- a/src/google-maps/map-info-window/map-info-window.ts +++ b/src/google-maps/map-info-window/map-info-window.ts @@ -90,14 +90,16 @@ export class MapInfoWindow implements OnInit, OnDestroy { private _elementRef: ElementRef) {} ngOnInit() { - this._combineOptions().pipe(takeUntil(this._destroy)).subscribe(options => { - if (this._infoWindow) { - this._infoWindow.setOptions(options); - } else { - this._infoWindow = new google.maps.InfoWindow(options); - this._eventManager.setTarget(this._infoWindow); - } - }); + if (this._googleMap._isBrowser) { + this._combineOptions().pipe(takeUntil(this._destroy)).subscribe(options => { + if (this._infoWindow) { + this._infoWindow.setOptions(options); + } else { + this._infoWindow = new google.maps.InfoWindow(options); + this._eventManager.setTarget(this._infoWindow); + } + }); + } } ngOnDestroy() { @@ -147,7 +149,7 @@ export class MapInfoWindow implements OnInit, OnDestroy { */ open(anchor?: MapMarker) { const marker = anchor ? anchor._marker : undefined; - if (this._googleMap._googleMap) { + if (this._googleMap._googleMap && this._infoWindow) { this._elementRef.nativeElement.style.display = ''; this._infoWindow!.open(this._googleMap._googleMap, marker); } diff --git a/src/google-maps/map-marker/map-marker.ts b/src/google-maps/map-marker/map-marker.ts index ee2b5f040e30..81792b0081ee 100644 --- a/src/google-maps/map-marker/map-marker.ts +++ b/src/google-maps/map-marker/map-marker.ts @@ -239,19 +239,21 @@ export class MapMarker implements OnInit, OnDestroy { constructor(private readonly _googleMap: GoogleMap) {} ngOnInit() { - const combinedOptionsChanges = this._combineOptions(); - - combinedOptionsChanges.pipe(take(1)).subscribe(options => { - this._marker = new google.maps.Marker(options); - this._marker.setMap(this._googleMap._googleMap); - this._eventManager.setTarget(this._marker); - }); - - this._watchForOptionsChanges(); - this._watchForTitleChanges(); - this._watchForPositionChanges(); - this._watchForLabelChanges(); - this._watchForClickableChanges(); + if (this._googleMap._isBrowser) { + const combinedOptionsChanges = this._combineOptions(); + + combinedOptionsChanges.pipe(take(1)).subscribe(options => { + this._marker = new google.maps.Marker(options); + this._marker.setMap(this._googleMap._googleMap); + this._eventManager.setTarget(this._marker); + }); + + this._watchForOptionsChanges(); + this._watchForTitleChanges(); + this._watchForPositionChanges(); + this._watchForLabelChanges(); + this._watchForClickableChanges(); + } } ngOnDestroy() { diff --git a/src/google-maps/map-polyline/map-polyline.ts b/src/google-maps/map-polyline/map-polyline.ts index 8dee190a2c47..de33eab3ae0e 100644 --- a/src/google-maps/map-polyline/map-polyline.ts +++ b/src/google-maps/map-polyline/map-polyline.ts @@ -132,16 +132,18 @@ export class MapPolyline implements OnInit, OnDestroy { constructor(private readonly _map: GoogleMap) {} ngOnInit() { - const combinedOptionsChanges = this._combineOptions(); + if (this._map._isBrowser) { + const combinedOptionsChanges = this._combineOptions(); - combinedOptionsChanges.pipe(take(1)).subscribe(options => { - this._polyline = new google.maps.Polyline(options); - this._polyline.setMap(this._map._googleMap); - this._eventManager.setTarget(this._polyline); - }); + combinedOptionsChanges.pipe(take(1)).subscribe(options => { + this._polyline = new google.maps.Polyline(options); + this._polyline.setMap(this._map._googleMap); + this._eventManager.setTarget(this._polyline); + }); - this._watchForOptionsChanges(); - this._watchForPathChanges(); + this._watchForOptionsChanges(); + this._watchForPathChanges(); + } } ngOnDestroy() { @@ -151,7 +153,9 @@ export class MapPolyline implements OnInit, OnDestroy { for (let listener of this._listeners) { listener.remove(); } - this._polyline.setMap(null); + if (this._polyline) { + this._polyline.setMap(null); + } } /** diff --git a/src/universal-app/kitchen-sink/kitchen-sink.html b/src/universal-app/kitchen-sink/kitchen-sink.html index df4600ce97e0..5126356b9d54 100644 --- a/src/universal-app/kitchen-sink/kitchen-sink.html +++ b/src/universal-app/kitchen-sink/kitchen-sink.html @@ -384,4 +384,12 @@

YouTube player

Google Map

- + + + Hello + + diff --git a/tools/public_api_guard/google-maps/google-maps.d.ts b/tools/public_api_guard/google-maps/google-maps.d.ts index f7ab84045ebc..643768e73549 100644 --- a/tools/public_api_guard/google-maps/google-maps.d.ts +++ b/tools/public_api_guard/google-maps/google-maps.d.ts @@ -1,5 +1,6 @@ export declare class GoogleMap implements OnChanges, OnInit, OnDestroy { _googleMap: UpdatedGoogleMap; + _isBrowser: boolean; boundsChanged: Observable; center: google.maps.LatLngLiteral | google.maps.LatLng; centerChanged: Observable;