How can I integrate Google Maps APIs inside an Angular 2 component

Question

I have an Angular 2 component that is defined in the file comp.ts in this way like this:

import {Component} from \'angular2/core\';

@component({
    selecto         


        

Answer 1

Use angular2-google-maps: https://angular-maps.com/

import { BrowserModule } from '@angular/platform-browser';
import { NgModule, ApplicationRef } from '@angular/core';

import { AgmCoreModule } from 'angular2-google-maps/core';

@Component({
  selector: 'app-root',
    styles: [`
        .sebm-google-map-container {
            height: 300px;
        }
    `],
  template: `
        
    `
})
export class AppComponent {
  lat: number = 51.678418;
  lng: number = 7.809007;
}

@NgModule({
  imports: [
    BrowserModule,
    AgmCoreModule.forRoot({
      apiKey: 'YOUR_GOOGLE_MAPS_API_KEY'
    })
  ],
  declarations: [ AppComponent ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}