Когда код карты Google помещен в приложение Angular2 app.component (как рекомендовано here), все работает нормально. Однако мне не нужна карта в app.component, но в общем вложенном компоненте (google-maps.component). И здесь начинается проблема: карта не отображается.Карты Angular2/Google: карта не отображается, когда во вложенном компоненте
Все должны быть сконфигурированы правильно, как:
А. Когда код из фрагмента (2) перемещается в (app.component.html) карта отображается правильно
Б. h1 текст тега (от 2 фрагмента ниже) отображается на нужном месте на отображаемой странице, где селектор Google-карте компонента размещен
C. В консоли объект окна имеет свойство .google.map
... поэтому вопрос должен относиться к загрузке карты/рендеринг
Q: Что может сделать карту шоу Google корректно при использовании из проверяемых компонента?
Вот разбивка кода, используемого:
(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. ц
...
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 { }