help(@angular/google-maps): Map is not shown, only grey container

[t-flux]

Hi Guys,

I couldnt mange to display the map (only shows an grey container). No Error message in the compiler or in the console. The first time I tried it in an existing project and the second time in an new project.

Here is what I did:

1.) npm install
npm install @angular/google-maps

2.) Added script to index.html
<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY">

3.) Added GoogleMapsModule to app.module.ts

import {GoogleMapsModule} from '@angular/google-maps';

@NgModule({
...
  imports: [
    ..
    GoogleMapsModule
  ],
  ...
})
export class AppModule { }

4.) Added directive to component

<google-map></google-map>

My Dependencies

"dependencies": {
    "@angular/animations": "~9.1.0",
    "@angular/common": "~9.1.0",
    "@angular/compiler": "~9.1.0",
    "@angular/core": "~9.1.0",
    "@angular/forms": "~9.1.0",
    "@angular/google-maps": "^9.2.0",
    "@angular/platform-browser": "~9.1.0",
    "@angular/platform-browser-dynamic": "~9.1.0",
    "@angular/router": "~9.1.0",
    "rxjs": "~6.5.4",
    "tslib": "^1.10.0",
    "zone.js": "~0.10.2"
  }

[t-flux]

Looks like there is an incompatibility with Version 9.2.0. Working with Version 9.1.3

[LazyHatGuy]

Are you talking about google-map 9.2.0?

[LazyHatGuy]

Never mind I figure it out :D.
There is deffinetly a problem with 9.2.0 google-maps

[rinckd]

I also see the same thing with 9.2.0 - and 9.1.3 is working fine.

[unruledboy]

Hi,

We used to be able to use the following to initialize and inject the google maps js into the component:

AgmCoreModule.forRoot({
      apiKey: 'THE_API_KEY',
      libraries: ['places'],
    })

But now we have to load the google maps js into the index.html page, not on demand per component?

Like this:

<script src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY">

[laurent67100]

The component seems to broken in version 9.2.0
Here is a stackblitz showing a regular map working and the angular component map with the grey background.

[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.}