角度クリッピングにgooglemapsを追加

Question

私は角度クリッピングプロジェクトにgooglemapsを実装しようとしています。私は 'angular2-google-maps'コンポーネント（github）があることを知っていますが、私はルートとより多くのカスタム機能が必要です。

私はプロジェクトにマップを実装上の二つの方法が見つかりました：

1：stackoverflow：GoogleのAPIローダーとを - しかし、私はグーグルマップを初期化する方法を見つけ出すことができませんでした...

2：DefinitelyTyped google.maps.d.tsで。 私はそれを私のプロジェクトに--global（ambient ist deprecated ..）してインストールし、src/typings.d.tsにindex.d.ts（global用）を追加し、 "google.map .."を使用することができます。

myLatLng = {lat: -25.363, lng: 131.044}; 
    map:any; 

    constructor() { 
    this.map = new google.maps.Map(document.getElementById('map'), { 
     center: this.myLatLng, 
     zoom: 4 
    }); 
    } 

が、私は、角度-cliのそれのエラーでそれを構築する場合： ：

任意のアイデア "にReferenceError Googleが定義されていません" .TSファイルで？

Answer 1

ここでは、Googleマップのコンポーネントをangular-cliプロジェクトに追加する手順を示します。

ステップ1：DefinitelyTypedからgoogle.mapsをインストール：

typings i dt~google.maps --global --save 

ステップ2：あなたがインストールされ、古いタイピングがあなたのsrc/typings.d.tsに

を

/// <reference path="../typings/index.d.ts" /> 

を追加している場合ステップ3：新しいコンポーネントを生成する

ng g component google-maps 

に次のコードを追加します

.TS：

height = '100px'; 
    myLatLng = {lat: -25.363, lng: 131.044}; 
    map:any; 

    constructor(private googleApi:GoogleApiService) {} 

    ngOnInit() { 
    this.googleApi.initMap().then(() => { 

     let latlng = new google.maps.LatLng(this.myLatLng.lat, this.myLatLng.lng); 

     this.map = new google.maps.Map(document.getElementById('map'), { 
     center: latlng, 
     zoom: 4 
     }); 

     new google.maps.Marker({ 
     position: latlng, 
     map: this.map, 
     title: 'Hello World!' 
     }); 
    }); 
    } 

の.html：

<div id="map" [style.height]="height"></div> 

ステップ4：新しいサービスを生成

ng g service google-maps/shared/google-api 

はSRCにGoogleApiService + HTTP_PROVIDERSを追加します。 /main.ts

コード：

const API_KEY = '[insert your code]'; 
const url = 'https://maps.googleapis.com/maps/api/js?key='+ API_KEY +'&callback=initMap'; 

@Injectable() 
export class GoogleApiService { 
    private loadMap: Promise<any>; 

    constructor(private http:Http) { 
    this.loadMap = new Promise((resolve) => { 
     window['initMap'] =() => { 
     resolve(); 
     }; 
     this.loadScript() 
    }); 
    } 

    public initMap():Promise<any> { 
    return this.loadMap; 
    } 

    private loadScript() { 
    let script = document.createElement('script'); 
    script.src = url; 
    script.type = 'text/javascript'; 

    if (document.body.contains(script)) { 
     return; 
    } 
    document.getElementsByTagName('head')[0].appendChild(script); 
    } 
} 

はたぶん、あなたはspec.tsファイルからいくつかの行を削除する必要があります。 しかし、GoogleMapsComponentをディレクティブとして追加することができます。

• ..私は時間があればたぶん私はgithubのに私のGoogleMapsComponentの現在のバージョンをアップロードしたルートなど で展開する超簡単です