问题:

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:

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?

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

回答2:

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

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:

回答3:

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

转载请标明出处:How can I integrate Google Maps APIs inside an Angular 2 component

文章来源: How can I integrate Google Maps APIs inside an Angular 2 component

标签

maps