bug(Google Maps): Angular Universal/Server Side Rendering Support

[Memphis335]

Expected Behavior

What behavior were you expecting to see?
SSR Support for this component

Actual Behavior

What behavior did you actually see?
Not working in SSR app.

ReferenceError: google is not defined

Environment

• Angular:
• CDK/Material:
• Browser(s):
• Operating System (e.g. Windows, macOS, Ubuntu):

[crisbeto]

The map-related components are basically no-op during server-side rendering so you shouldn't be getting any errors. Can you post what your template looks like? We have a test that tries to render it on the server, but it's possible that we haven't covered a particular case. Here's what the test looks like: https://github.com/angular/components/blob/master/src/universal-app/kitchen-sink/kitchen-sink.html#L387

[Memphis335]

It is trying to initialize the google global variable that is exposed from the API.

<google-map height="100%" width="100%" [zoom]="zoom" [center]="center" [options]="options"> <map-marker [position]="marker.position" [label]="marker.label" [options]="marker.options"> </map-marker> </google-map>

[crisbeto]

I think the problem in your case is the { animation: google.maps.Animation.bounce }. Since the API isn't loaded on the server, it'll throw an error. You should be able to fix it by changing it to { animation: typeof google !== 'undefined' ? google.maps.Animation.bounce : undefined }.

[jelbourn]

Closing since this looks like an issue in the application code rather than the maps component

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}