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

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?

Answers


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

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>

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 {}

Need Your Help

Good Clojure Code Examples?

clojure

I'm in the process of checking out Clojure for the first time. I've found it useful looking at the (doc xxx) and (source xxx) of the Clojure core library, but I'm more concerned with how you would

Spring boot + thymeleaf in IntelliJ: cannot resolve vars

java spring web intellij-idea thymeleaf

I'm writing a short web form application using spring boot and thymeleaf on IntelliJ, but it seems that in the html file, all fields in the model cannot be resolved. Here is my code: