はどのように私は、角2コンポーネント

の内側にGoogle MapsのAPIを統合することができます私はこのような、このようにファイルcomp.tsに定義されている角度2の成分を持っています私は次のコードcomp.htmlファイルに挿入したGoogleマップ、：はどのように私は、角2コンポーネント

<!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>

このコードは、このリンクhttp://www.w3schools.com/googleAPI/google_maps_basic.aspからコピーされました。問題は、コンポーネントがマップを表示しないことです。私は何を間違えたのですか？

出典

2016-05-19 nix86

解決策が見つかりました。まず、次の行：

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

をindex.htmlファイルに挿入する必要があります。マップを作成するコードは、comp.tsファイルに挿入する必要があります。特に、クラスのコンストラクタの後に配置できる特別なメソッド、つまり "ngOnInit"に挿入する必要があります。

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

最後に、Googleのマップが含まれているために起こっているID「Googleマップ」を持つdiv要素は、comp.htmlファイルに挿入する必要があり、次のようになります：

これはcomp.tsです

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

出典

2016-05-20 12:44:36 nix86

あなたはあなたのマップは、あなたのコンポーネントのHTMLテンプレートにで表示したい要素を配置する必要があります。ちょうど説明のために。通常、テンプレートにボディタグはありません。 – thomi

この種のソリューションはAngular 5.xでも動作します。素晴らしい答え、ありがとう！このバージョンでこれを使用する場合は、 'npm install @ types/googlemaps --save'が必要になるかもしれません。 – tkhm

ええ、そうすることができます。しかし、typescriptコンパイラにエラーがあるので、暗黙的にgoogle変数を宣言することを忘れないでください。

declare var google: any;

コンポーネントをインポートした直後にこのディレクティブを追加します。

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

出典

2016-08-07 09:33:57

ngOnInitは私に感謝したgetElementById問題を解決するのを助けました！ google var宣言の時点で、[gmaps typings]（https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/googlemaps/google.maps.d.ts）を使用することをお勧めします – youssef

-4

使用angular2-グーグルマップ：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 {}

出典

2016-11-18 01:35:32 nisenish

はどのように私は、角2コンポーネント

答えて

関連する問題