After following the recommended steps to place Google map code in the Angular2 app.component, everything was working perfectly. However, I encountered an issue when trying to display the map in a shared nestable component called google-maps.component. The map simply refuses to show up.
Everything seems to be configured correctly:
A. Moving the code snippet(2) from the google-maps.component.html to the app.component.html displays the map properly
B. The text inside the h1 tag (from snippet 2 below) appears at the correct location on the rendered page where the google-maps component selector is placed
C. The console shows that the window object has a .google.map property
Q: How can I get the Google map to display correctly when used from the testable component?
Here's a breakdown of the code being used:
(1) google-maps.component.css
sebm-google-map-container{
height: 300px;
}(2) google-maps.component.html
<h1>GOOGLE MAPS COMPONENT START**********</h1>
<sebm-google-map [latitude]="50" [longitude]="50">
</sebm-google-map>
<h1>GOOGLE MAPS COMPONENT END**********</h1>(3) google-maps.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'google-maps',
templateUrl: './google-maps.component.html',
styleUrls: ['./google-maps.component.css'],
})
export class GoogleMapsComponent {}(4) app.module.ts
...
import { AgmCoreModule } from 'angular2-google-maps/core';
import { GoogleMapsComponent } from './shared/google-maps.component';
...
@NgModule({
imports: [ AgmCoreModule.forRoot({ apiKey: '...' }),
RouterModule.forRoot([ ... ])
],
declarations: [ ..., AppComponent, GoogleMapsComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }