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

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"
  }

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