Angular-google-maps: Can't get lazy loaded modules working

Created on 6 Jan 2017  路  7Comments  路  Source: SebastianM/angular-google-maps

As per title, I have installed aGM in my project and it works perfectly inside the app-module on my home page. However, when used inside a lazy loaded / routed module, the type ahead places element works fine, but the map doesn't draw. I am left with the usual google grey background.

Angular 2.4.1 BTW, a lot has changed between this and 2.0.0, so many of the prior issues are irrelevant.

I'm trying to set up a plunkr, but tripping my way through it. Will add a reference to it if I get it going.
I use AgmCoreModule.forRoot() in app.module, but just import AgmCoreModule in the feature module.

So if there is a good working example to follow, please direct me to it. (Can't find anything useful in the docs).
If there's a known issue, please just let me know so I can follow it, can't find it under open issues.
If this is something that isn't available, please just let me know and put me out of my misery !

Thanks

Tony

more info

Most helpful comment

@TonyJackson I'm just guessing. You have no errors and see a grey map. So this might be possible bugs/problems:

  1. No latitude/longitude or latitude and/or longitude are no numbers (maybe strings or something)
  2. The map gets initialized in a place that is initially hidden (then you could try to call the triggerResize() method of SebmGoogleMap after the map is visible)

When this doesn't help, please try to provide a Plunkr or at least important code parts. Thx!

All 7 comments

@TonyJackson I'm just guessing. You have no errors and see a grey map. So this might be possible bugs/problems:

  1. No latitude/longitude or latitude and/or longitude are no numbers (maybe strings or something)
  2. The map gets initialized in a place that is initially hidden (then you could try to call the triggerResize() method of SebmGoogleMap after the map is visible)

When this doesn't help, please try to provide a Plunkr or at least important code parts. Thx!

Please reopen if you have a reproducible plunker.

Sebastian can you please provide a triggerResize() example? Can't figure out how i could use it. I get a grey map too because map is hidden and gets visible with a button click. If i resize the window the map is displayed fine, so no errors in code. Thanks

I've fixed it, followed this: https://github.com/SebastianM/angular2-google-maps/issues/669#issuecomment-251198646

solution if anyone else needs it

import {MapsAPILoader, SebmGoogleMap} from 'angular2-google-maps/core';

inside component class:
@ViewChild(SebmGoogleMap) map: SebmGoogleMap;

and on ngOnInit:
this.map.triggerResize();

@efstathiosntonas THANK YOU, saved the day...
@SebastianM please add this to the docs.

this.map.triggerResize() needed for lazyLoaded modules

@efstathiosntonas i think you need to wait for the view to be initialized before you can access your @ViewChild so instead of ngOnInit use ngAfterViewInit

it is not working for me

Was this page helpful?
0 / 5 - 0 ratings

Related issues

gnujeremie picture gnujeremie  路  3Comments

nthonymiller picture nthonymiller  路  4Comments

gizm0bill picture gizm0bill  路  4Comments

alexweber picture alexweber  路  4Comments

n1t3w0lf picture n1t3w0lf  路  3Comments