Angular-google-maps: My Maps is gray

[ranouf]

Hi,

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

I copied pasted this:

{{ title }}

When I launch the website i have a gray map.

How can I fix the problem?

[ranouf]

If I put the yellow person on the map, I can see the street view mode.

[nasreddineskandrani]

i had the same issue in an older version, Are you generating the api key?

in your ng2+ and with the new version of agm you should have in your app.module.ts

@NgModule({
imports: [
AgmCoreModule.forRoot({
apiKey: 'YOUR_API_KEY
}),
....

please read as reference for an older version: https://github.com/SebastianM/angular-google-maps/issues/550
or the official doc => https://angular-maps.com/guides/getting-started/

Hope it will help!

[ranouf]

I finally used another google maps plugin, I dont know why it doesnt work with this one.
Thank you for your help.

[balr404]

what you mean by YOUR_API_KEY ? is it a google apikey?
provide me with an example what it mean (YOUR_API_KEY)exactly

[drewlavine]

@ranouf which plugin did you use instead?

[bradenclapp]

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:

.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

[Serhii-SetSchedule]

Have the same issue like @bradenclapp with map in modal window appended dynamically.
Map works perfectly in main window but in modal it shows pic as @ranouf had shown.

Tried to invoke agmMap.triggerResize() on mapReady event or on ngOnInit - it did not help.
Just this solution works for me but it is little ugly.

`
ngOnInit() {

this.GMS.getMapBoundsObservable(this.innerData.markers).subscribe((bounds)=>{

  if(bounds) {

    this.mapBounds = bounds;

    setTimeout(()=>{this.agmMap.triggerResize();}, 100);

  }

});

}`

@SebastianM It will be great if you reopen the issue.

[Enngage]

@SebastianM, I'm having the same issue. In my case the map loads fine with page refresh (F5), but is greyed out if I switch back and forth between components.

I noticed that the map is shown correct if the browser window is resized in any way.

[nasreddineskandrani]

Anyone that still have this grey map issue. I suggest you build an example online of the problem here. https://stackblitz.com/
*send it i ll help you or others will do => Always better to show examples online of problem :)

[vladvgeorgescu]

Hi everyone! I'm having this problem too. My map shows grey until I zoom in/out the screen. After that, It shows properly! I tried the well known solution of invoking the resize trigger [ this.agmMap.triggerResize() ] and it still doesn't work.
Thanks in advance to everybody who will come up with a solution!

[Enngage]

In ma case this issue was caused by having the map under *ngIf. If you need to dynamically show/hide the map, use display:none style instead. Otherwise, you might have to change how the scripts are loaded & initialized.

[vladvgeorgescu]

Thanks but I don't dinamically show the maps! Here is my code:
mycomponent.html : ......................<div class="row"> <agm-map [latitude]="latitude" [longitude]="longitude" id="gmap" #agmMap> <agm-marker [latitude]="latitude" [longitude]="longitude"></agm-marker> </agm-map> </div>.............. (no *ngIf over agm map!!)

mycomponent.ts:

   ..... public latitude=45.5;
    public longitude=51;
    @ViewChild('maintenance_interval') maintenance_interval_container: ElementRef;
    @ViewChild('agmMap') agmMap : AgmMap

    constructor(public assetService: AssetService, public alertService: AlertService, private renderer: Renderer2) {}

    ngOnInit() {                

        jQuery('#data_1 .input-group.date').datepicker({
            todayBtn: "linked",
            keyboardNavigation: false,
            forceParse: false,
            calendarWeeks: true,
            autoclose: true
        });

        this.calendarInit();

        jQuery("#completed").css("display", "none");
        this.agmMap.triggerResize(); //the first solution attempt
    } .......

mymodule.ts:

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

@NgModule({
  declarations: [   
    .....
  ],
  imports: [
    ......,
    AgmCoreModule.forRoot({
      apiKey: 'APIKEY'
    })
  ],    
  exports: [
    ......
  ],
  providers: [
    .....
  ]
})
export class AssetModule { }

mycomponent.css:

agm-map{
    height:50vh;
    width:100%;
    margin-top:0%;
}

I have to mention that I use bootstrap classes in the divs that contain agm-map.

[Enngage]

It doesn't have to be dynamically loaded (*ngIf) inside that very component. If you have ANY *ngIf in any of your master templates that show your map component, it will break the maps as well. In my case, I was using *ngIf in my master layout template and not in my map component.

[mkamranhamid]

Hi guys i know its late but i'm having this issue where i'm using the map in a modal and it stops working but on full screen it works fine the weird thing is if i resize the browser with modal view open it starts to show map i've been stuck in this for long any help would be appreciated
the below screen is what i see when i open modal and it doesn't work

after resizing of browser i see this

if anyone know when the text under google map disappear/appear then it would be a good lead for me
This is what my code looks like
@ViewChild(AgmMap) myMap: AgmMap;
this.myMap.triggerResize();
html
<agm-map #map [latitude]="49.014821" [longitude]="10.985072"> <agm-marker [latitude]="49.014821" [longitude]="10.985072" [markerDraggable]="true"></agm-marker> </agm-map>

Thanks

Solution:

lol i don't know what really happened here but the below code solved my problem

html
<agm-map #agmMap [latitude]="49.014821" [longitude]="10.985072"> <agm-marker [latitude]="49.014821" [longitude]="10.985072" [markerDraggable]="true"></agm-marker> </agm-map>
component
@ViewChild('agmMap') agmMap: AgmMap;
i called the below code on ngOnChanges means whenever my modal executes
setTimeout(()=>{ this.agmMap.triggerResize(); },500)
setTimeout played a major role here

[estrellajm]

Thanks @bradenclapp ! Your solution worked for me

@ViewChild('agmMap') agmMap : AgmMap

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

[jadurani]

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:

.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 :thinking:

---

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>

[Tommertom]

Nowadays (sept 2020), the resize does not work anymore (deprecated event). Manually resizing the div with setTimeout triggers a render (e.g. style="width:100%".

[anthonyplews]

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:

.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!