Angular 2 with angular2-google-map

Question

i would like to ask question about angular2-google-map in angular 2. I have followed the instruction in https://angular-maps.com/docs/getting-started.html. Running 'ng serve' give the following error:

enter image description here

I have digging around, but angular 2 does not have SystemJS to configure the node_module.

Thanks, that solve issues with angular/core. but then it return the error 'has no exported member 'AgmCoreModule' ''. — Abdul Afiq, May 04 '17 at 13:56
Could you share your project ? You can see a working example with System.js here : http://plnkr.co/edit/YX7W20?p=preview — Karbos 538, May 04 '17 at 14:08
how to share my project, i am still new to stackoverflow and angular2 architecture, sorry for troubling you — Abdul Afiq, May 04 '17 at 14:18
https://github.com/AbdulAfiq/Angular2Map.git , sorry im late, still new to github too. — Abdul Afiq, May 04 '17 at 15:08

score 0 · Answer 1 · answered May 04 '17 at 23:00

0

After night of digging around, i have found the answer. The following step is the fix for "has no exported member 'AgmCoreModule' ":

Inside package.json:

"@agm/core": "1.0.0-beta.0"

In command line:

npm install

The Getting Started only showed to install package after the creation of project. Since that i'm still new to this, the error is unseen by me. Thank you Karbos 538 and Roman C. for helping me in Stackoverflow.

answered May 04 '17 at 23:00

Abdul Afiq

11
3

i hope my post will be a great help to others who are learning Angular 2 – Abdul Afiq May 04 '17 at 23:03

score 0 · Answer 2 · answered May 23 '17 at 12:14

To get the angular2-google-map now called @agm/core working it is important to update the selector tags. The author has not yet updated the docs (in this moment of the post).

BEFORE last update:

npm install angular2-google-maps --save

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

NOW after latest update

npm install @agm/core --save

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

Example setup:

file: google-maps.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-google-maps',
  templateUrl: './google-maps.component.html',
  styleUrls: ['./google-maps.component.css'],
})

export class GoogleMapsComponent implements OnInit {
  lat: number = 51.678418;
  lng: number = 7.809007;

constructor() { }

  ngOnInit() {
  }

}

file: google-maps.component.html

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

file: google-maps.component.css

.sebm-google-map-container {
  height: 300px;
}

file: app.module.ts

import { AgmCoreModule } from '@agm/core';
@NgModule({imports: [AgmCoreModule.forRoot()}]]

Angular 2 with angular2-google-map

2 Answers2