Using SebM google maps module in child component shows blank map

Question

EDIT: I found the problem. I was using ng2-boostrap tabset module, when adding the maps inside this view, the map does not render. I haven't been able to fix the problem though.

I'm working on an angular 2 application, where i need to import google maps module into a sub module. My question is - how might i do that correctly? is this even possible as it is.

What i've tried:

I have added the import { AgmCoreModule } from 'angular2-google-maps/core'; and AgmCoreModule.forRoot({ apiKey: 'xxx', libraries: ['places'] }) where xxx is my apiKey downloaded from google api site. If i run this code in a newly angular-cli created app - loading the module into app.module, everything works fine. Selector code looks:

    <sebm-google-map [latitude]="lat" [longitude]="lng">
          <sebm-google-map-marker [latitude]="latitude" [longitude]="longitude">
             </sebm-google-map-marker>
    </sebm-google-map>

However, i want to use it in a module called MapModule and import that module into my app.module, so i import the AgmCoreModule into the MapModule, without forRoot(), and the selector is recognized in the html and the map is loaded but the map shows an empty view - i.e. there is a map with google logo and stuff, but no content - no error messages. I use the exact same code as my test example.

I also tried adding the AgmCoreModule with the forRoot({apiKey: 'xxx'}) with the same result. I removed the import from the App.module and only imported into the MapModule with the same result.

Am i missing something here? i can provide more code if needed, but i think my problem lies with the lack of knowledge in imports.

Kind regards Chris

Answer 1

Did you tried putting this code in your component that is responsible for viewing the map?

  import {MapsAPILoader, SebmGoogleMap} from 'angular2-google-maps/core';
  @ViewChild(SebmGoogleMap) map: SebmGoogleMap;

  this.map.triggerResize();

if the map is not rendered in initial view, eg. inside an *ngif block then issues arise. When you inspect the elements in the tabs do you see map code or you see map code only when the map tab is activated?

Normally when there are no errors, a triggerResize() will fix your issue.