question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 3 years ago
  • Comments:7

github_iconTop GitHub Comments

4reactions
t-fluxcommented, Mar 30, 2020

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

2reactions
rinckdcommented, Mar 31, 2020

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

Google Maps JavaScript API shows grey blank box instead of ...
So far I have tried google.maps.event.trigger(map, 'resize') , since I have changed the width of the map div... Saw that from a solution ......
Read more >
Error Messages | Maps JavaScript API - Google Developers
Under certain circumstances, a darkened map, or 'negative' Street View image, watermarked with the text "for development purposes only", may be displayed. This ......
Read more >
5 Ways to Add Responsive Google Maps to Your Website
Create Responsive Google Maps without API Key · Obtain a Google embed code · Paste the embed code into your HTML page or...
Read more >
Blank or missing map tiles | Help - Mapbox docs
If you're hiding your map initially with CSS rules like display:none , then showing it dynamically with JavaScript, it may have some problems...
Read more >
React Google Maps Style Guide
Everything inside a component will be mounted automatically on the map And it will be automatically unmounted from the map if you don't...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found