Estoy tratando de hacer que AGM funcione en mi aplicación Ionic 2.
aplicación.módulo.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 se ejecuta, me sale el siguiente error:
Errores de análisis de plantilla: no se puede vincular a 'latitude' ya que no es una propiedad conocida de 'sebm-google-map'.
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> ` })SrAxi me señaló en 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 se renombró recientemente a @agm . Si importa AGM usando @agm (como en el tutorial en Github), los nombres de los selectores se cambiaron pero la documentación no se actualizó.
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, necesitaba actualizar map.html para:
<agm-map [latitude]="lat" [longitude]="lng"> <agm-marker [latitude]="lat" [longitude]="lng"></agm-marker> </agm-map>