Угловая 2 с использованием GoogleMap Api. MAP не отображается, когда html отображается

Question

Я создаю угловое приложение, которое взаимодействует с google map api. В документации говорится, что если стили не применяются, карта google не будет отображаться на экране. Даже если я явно присваиваю класс css элементу html, это не имеет значения. Может кто-нибудь помочь

согласно документации по этой ссылке

https://angular-maps.com/docs/getting-started.html

.sebm-google-map-container { 
    height: 300px; 
} 

Я объявил его в своем компоненте, однако я только в состоянии, чтобы увидеть название, а не карту. Я также не вижу ошибок в инструментах разработчика. Пожалуйста, смотрите мой код ниже

ShipGeoFinderComponent

@Component({ 
    selector: 'ship-root', 
    templateUrl: '/app/ShipGeoFinder/ShipGeoFinder.html', 
    styles: [` 
    .sebm-google-map-container { 
     height: 400px; 
     width: 400px; 
    } 
    `], 
}) 
export class ShipGeoFinderComponent { 
    title: string = 'My first angular2-google-maps project'; 
    lat: number = 51.678418; 
    lng: number = 7.809007; 
} 

ShipGeoFinder.html

<h1>{{ title }}</h1> 

<!-- this creates a google map on the page with the given lat/lng from --> 
<!-- the component as the initial center of the map: --> 

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

Answer 1

Убедитесь, что вы импортировали модуль Угловые Карты в вашем app.module.ts

//app.module.ts   
    import { AgmCoreModule } from 'angular2-google-maps/core'; 

    imports: [ 
    AgmCoreModule.forRoot({ 
     apiKey: 'YOUR_KEY_FROM_GOOGLE_CONSOLE' //Ensure Google Maps Javascript API is enabled 
    }) 
    ] 

Это должно сделать трюк, если вы еще этого не сделали.