Components: bug([google-map]): [README.MD example only produces grey rectangle, no map]

[eamon-otuathail]

Reproduction

The README for Google Maps contains code that produces just a grey map:
https://github.com/angular/components/blob/master/src/google-maps/README.md

Steps to reproduce:
Add the readme code to a brand new simple new demo project (ng new demo)

Expected Behavior

The map should be displayed correctly, without having to force a refresh.

Actual Behavior

A grey rectangle is displayed where the map should be.
No error messages are produced.
Note the README example did work correctly for Google Maps in Angular Components 9.0.

With Google-Maps in Angular Components 9.2, to get a map correctly displayed, one now needs to add this extra line to the demo .html file:
[mapTypeId]="mapTypeId"
And add this line to the demo .ts file:
mapTypeId: google.maps.MapTypeId;
and also implement AfterViewInit to force a redraw:
export class GoogleMapDemo implements AfterViewInit {
..
ngAfterViewInit(): void {
// Vary the map properties somehow to force a redraw
this.mapTypeId = google.maps.MapTypeId.ROADMAP;
}
}

Environment

• Angular: 9.1.0
• CDK/Material: 9.2.0
• Browser(s): Chrome 83.0.4093.3
• Operating System: Windows

[TheLazyHatGuy]

Try installing @angular/[email protected]

[sebinbenjamin]

Try installing @angular/[email protected]

Works ! Thanks

[enaukkarinen]

Try installing @angular/[email protected]

Worked for me too. 9.2.0 seems broken.

[MrFurther]

I still see the issue, even after having installed v9.1.3.
The map renders fine in local, but it will throw a grey rectangle in production. No error in console on load, just this when I try to zoom in/out in the grey box:

Uncaught TypeError: Cannot read property 'zoom' of null

I've tried:

-Setting different css
-Moving the setting of center from ngInit to AfterViewInit
-Checked API keys and permissions

[crisbeto]

The fix that closed this issue hasn't been released yet.

[angular-automatic-lock-bot[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._}