Hi,

Everything is well configured (I think), (npm install, module + key loaded, google api enabled, css, ts, ...)

I copied pasted this:

{{ title }}

<agm-map [latitude]="lat" [longitude]="lng">
<agm-marker [latitude]="lat" [longitude]="lng">

When I launch the website i have a gray map.

How can I fix the problem?

I am having this issue currently. When the agm-map tags are in an upper component it renders fine but once I have it in an accordion it shows up like @ranouf screen shot. I think it has something to do with it being in a subcomponent. Please reopen this issue @SebastianM

EDIT I found exploring other issues this fix.

Html:
<agm-map #agmMap [latitude]="lat" [longitude]="lng">

.TS :

import { AgmMap } from '@agm/core';

@ViewChild('agmMap') agmMap : AgmMap

funcActivatedByParentComponentOnAccordionOpen() {
          this.agmMap.triggerResize();
}

I'd recommend a function inside the agmMap something like redraw() or reset() so that its more obvious that there are tools to refresh the map

I am having this issue currently. When the agm-map tags are in an upper component it renders fine but once I have it in an accordion it shows up like @ranouf screen shot. I think it has something to do with it being in a subcomponent. Please reopen this issue @SebastianM

EDIT I found exploring other issues this fix.

Html:
<agm-map #agmMap [latitude]="lat" [longitude]="lng">
.TS :

import { AgmMap } from '@agm/core';

@ViewChild('agmMap') agmMap : AgmMap

funcActivatedByParentComponentOnAccordionOpen() {
          this.agmMap.triggerResize();
}

I'd recommend a function inside the agmMap something like redraw() or reset() so that its more obvious that there are tools to refresh the map

Interestingly, even the mere addition of the template variable #agmMap already solved the problem for me and there's no need to trigger resize 🤔

UPDATE: When I close my modal and re-open it again, it gets stuck on gray screen even when I've already triggered resize

UPDATE:

I got it working consistently by doing:

controller (TS):

loadMap = false;

constructor(...) {...}

ngAfterInitContent() {
  ...
  setTimeout(() => this.loadMap = true, 0)
}

HTML:

  <agm-map
    *ngIf="loadMap"
    ...
  ></agm-map>

I am having this issue currently. When the agm-map tags are in an upper component it renders fine but once I have it in an accordion it shows up like @ranouf screen shot. I think it has something to do with it being in a subcomponent. Please reopen this issue @SebastianM
EDIT I found exploring other issues this fix.
Html:
<agm-map #agmMap [latitude]="lat" [longitude]="lng">
.TS :

import { AgmMap } from '@agm/core';

@ViewChild('agmMap') agmMap : AgmMap

funcActivatedByParentComponentOnAccordionOpen() {
          this.agmMap.triggerResize();
}

I'd recommend a function inside the agmMap something like redraw() or reset() so that its more obvious that there are tools to refresh the map

Interestingly, even the mere addition of the template variable #agmMap already solved the problem for me and there's no need to trigger resize 🤔

UPDATE: When I close my modal and re-open it again, it gets stuck on gray screen even when I've already triggered resize

UPDATE:

I got it working consistently by doing:

controller (TS):

loadMap = false;

constructor(...) {...}

ngAfterInitContent() {
  ...
  setTimeout(() => this.loadMap = true, 0)
}

HTML:

  <agm-map
    *ngIf="loadMap"
    ...
  ></agm-map>

This was the only solution that worked for me on an ionic project, thank you!