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

Yeah, you could do so. But there would be an error in typescript compiler, so don't forget to implicitly declare google variable.

declare var google: any;

add this directive right after component import.

import { Component, OnInit } from '@angular/core';
declare var google: any;

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: 'app.component.html',
  styleUrls: ['app.component.css']
})
export class AppComponent implements OnInit {
  ngOnInit() {
    var mapProp = {
            center: new google.maps.LatLng(51.508742, -0.120850),
            zoom: 5,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
      var map = new google.maps.Map(document.getElementById("gmap"), mapProp);
  }
}