CODEWITHSUNDEEP
angulartypescriptionic-frameworkionic2
Benedict Lewis
Benedict Lewis

Reputation: 2813

Angular Google Maps doesn't render

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'.

Upvotes: 2

Views: 3145

Answers (2)

Benedict Lewis
Benedict Lewis

Reputation: 2813

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>

Upvotes: 0

SrAxi
SrAxi

Reputation: 20015

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>
 `
})

Upvotes: 1

Related Questions