typescript - Angular Google Maps no se renderiza

Estoy tratando de hacer que AGM funcione en mi aplicación Ionic 2.

app.module.ts

...

import { AgmCoreModule } from '@agm/core';
import { DirectionsMapDirective } from '../components/directions-map';

@NgModule({
  declarations: [
    MyApp,
    ...
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    AgmCoreModule.forRoot({
      apiKey: '<api key>',
      libraries: ['places']
    })
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    ...
  ],
  providers: [
    StatusBar,
    SplashScreen,
    DirectionsMapDirective,
    { provide: ErrorHandler, useClass: IonicErrorHandler }
  ]
})
export class AppModule {}

mapa.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';

@Component({
  selector: 'page-requests',
  templateUrl: 'requests.html'
})
export class MapPage {
  lat: number = 51.678418;
  lng: number = 7.809007;

  constructor(public navCtrl: NavController) {}

}

mapa.html

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

Cuando lo ejecuto, obtengo el siguiente error:

Errores de análisis de plantilla: No se puede enlazar a 'latitude' ya que no es una propiedad conocida de 'sebm-google-map'.

Respuesta #1

Necesitas importar la directiva:

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

Y agréguelos a su declaración @Component:

@Component({
 selector: 'my-map-cmp',
 directives: [SebmGoogleMap, SebmGoogleMapMarker],
 template: `
   <sebm-google-map [latitude]="lat" [longitude]="lng" [zoom]="zoom">
     <sebm-google-map-marker [latitude]="lat" [longitude]="lng" [label]="'M'">
     </sebm-google-map-marker>
   </sebm-google-map>
 `
})

Respuesta #2

SrAxi me indicó la dirección correcta, sin embargo, en la versión actual de Angular (4.x), creo que los Componentes no pueden tener directivas.

Lo que descubrí es que angular2-google-maps fue renombrado recientemente a @agm. Si importas AGM usando @agm (como en el tutorial en Github), los nombres de los selectores han sido cambiados pero la documentación no ha sido actualizada.

Esta es la única documentación de los nuevos selectores: https://github.com/SebastianM/angular-google-maps/blob/master/CHANGELOG.md#100-beta0---green-zebra-2017-04-09

En mi ejemplo, necesité actualizar map.html para:

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