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({
    selector:'my-comp',
    templateUrl:'comp.html'
})

export class MyComp{
    constructor(){
    }
}

Because I want the component to show a google map, I have inserted in the file comp.html the following code:

<!DOCTYPE html>
<html>
<head>
<script src="http://maps.googleapis.com/maps/api/js"></script>
<script>
function initialize() {
  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("googleMap"),mapProp);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>

<body>
<div id="googleMap" style="width:500px;height:380px;"></div>
</body>

</html>

This code has been copied from this link http://www.w3schools.com/googleAPI/google_maps_basic.asp. The problem is that the component doesn't show the map. What have I done wrong?

Ruslan Abramov · Accepted Answer · 2016-08-07 09:33:57Z

23

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

answered Aug 7, 2016 at 9:33

Ruslan Abramov

4463 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

youssef Over a year ago

The ngOnInit helped me resolve a getElementById problem i had thanks ! as of the google var declaration, i suggest using [gmaps typings] (github.com/DefinitelyTyped/DefinitelyTyped/blob/master/…) it helps really well

SamuraiJack Over a year ago

@youssef I am getting google is not defined in console

youssef Over a year ago

@Arbaaz i guess the google maps JS is not properly imported in your app, can you provide a GIST/simple code of your app ?

nix86 · Accepted Answer · 2017-11-16 22:17:28Z

17

I have found a solution. First of all, the following line:

<script src="http://maps.googleapis.com/maps/api/js?key=[YOUR_API_KEY]"></script>

must be inserted in the index.html file. The code which creates the map must be inserted in the comp.ts file. In particular, it must be inserted in a special method, namely "ngOnInit", which can be positioned after the constructor of the class. This is comp.ts:

import { Component } from 'angular2/core';

declare const google: any;

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

export class AppMainComponent {
    constructor() {}
    ngOnInit() {
        let mapProp = {
            center: new google.maps.LatLng(51.508742, -0.120850),
            zoom: 5,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        let map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
    }
}

Finally, the div with id "googleMap", which is going to contain the google map, must be inserted in the comp.html file, which will look like this:

<body>
    <div id="googleMap" style="width:500px;height:380px;"></div>
</body>

edited Nov 16, 2017 at 22:17

user6600549

answered May 20, 2016 at 12:44

nix86

3,05711 gold badges41 silver badges77 bronze badges

4 Comments

thomi Over a year ago

You should put the element you want your map displayed in into your component's html template. Just for clarification. You usually don't have body tags in your template.

tkhm Over a year ago

This kind of solution also works on Angular 5.x. Great answer, thanks! If you use this in that version, you might need npm install @types/googlemaps --save.

SamuraiJack Over a year ago

@tkhm i am getting google is not defined in console

tkhm Over a year ago

Did you import types? In other words, did you add import { } from @types/googlemaps on your ts file ?

nisenish · Accepted Answer · 2016-11-18 01:35:32Z

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: `
        <sebm-google-map [latitude]="lat" [longitude]="lng"></sebm-google-map>
    `
})
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 {}

Collectives™ on Stack Overflow

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

3 Answers 3

3 Comments

4 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

4 Comments

Comments

Linked

Related