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.

Answer 1

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.

Answer 2

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()}]]