I'm trying to get AGM to work in my Ionic 2 application.
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 {}
map.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) {}
}
map.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>
When run, I get the following error:
Template parse errors: Can't bind to 'latitude' since it isn't a known property of 'sebm-google-map'.
You need to import the directive:
import {SebmGoogleMap, SebmGoogleMapMarker} from 'angular2-google-maps/core';
And add them to your @Component declaration:
@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 pointed me in the right direction, however in the current Angular version (4.x), Components cannot have directives I believe.
What I discovered is that angular2-google-maps was only recently renamed to @agm. If you import AGM using @agm (as in the tutorial on Github), the names of the selectors have been changed but the documentation has not been updated.
This is the only documentation of the new selectors: https://github.com/SebastianM/angular-google-maps/blob/master/CHANGELOG.md#100-beta0---green-zebra-2017-04-09
In my example, I needed up update map.html to:
<agm-map [latitude]="lat" [longitude]="lng">
<agm-marker [latitude]="lat" [longitude]="lng"></agm-marker>
</agm-map>