2016-09-28 5 views
0

私はYeomanを使って角度のあるプロジェクトを設定し、ngmapを使ってページにGoogleマップを埋め込みました。私はマップが初期化されたら、アドレスの緯度/経度を取得するためにgoogleジオコードサービスを使って地図にマーカーを追加します。gulpプロジェクトでngMapを使用する - ビルドに失敗しました - 'google'が定義されていません

var vm = this; 
vm.address = '1600 Pennsylvania Ave NW, Washington, DC 20500, United States'; 
NgMap.getMap().then(function() { 
    var geocoder = new google.maps.Geocoder(); 
    geocoder.geocode({ 
    address: vm.address 
    }, function(results, status) { 
    if (status === google.maps.GeocoderStatus.OK) { 
    vm.markerPosition = '[' + results[0].geometry.location.lat() + ', ' + results[0].geometry.location.lng() + ']'; 
    } else { 
    console.log("Unable to retrive details for address: " + address); 
    } 
    }); 
}); 

それは罰金働いて、私はここで実行されているplunkrをした - 私はユニットテストを実行するときが、私は一口ビルドを使用してビルドを実行したときに、私はこのエラーを取得し、同じ - https://plnkr.co/Ex91VGqdFmL9FP78uzU0?p=preview

'google' is not defined 

google.maps.Geocoderへの呼び出しが失敗しないように、何を注入するか、模擬する必要がありますか?

要求されたように、これはビルドngMapの例のいくつかによって

<!doctype html> 
<html ng-app="myApp"> 
    <head> 
    <base href="/"> 
    <meta charset="utf-8"> 
    <title translate>title</title> 
    <meta name="description" content=""> 
    <meta name="viewport" content="width=device-width"> 
    <link rel="icon" type="image/png" href="images/icon.png"> 
    <link rel="stylesheet" href="styles/vendor-d41d8cd98f.css"> 
    <link rel="stylesheet" href="styles/app-2dd2bcbbbd.css"> 
    <script src="https://maps.google.com/maps/api/js"></script> 
    </head> 
    <body> 
     <main ui-view></main> 
    </body> 
    <script src="scripts/vendor-83b6c91f4a.js"></script> 
    <script src="scripts/app-41321c4301.js"></script> 
</html> 
+1

を使用する前にすべてドキュメントを読むことを学ぶためにあなたが一気ビルドを使用した後、ページのサンプルを共有することはできますか?通常、このようなエラーメッセージは、Google Maps JavaScript APIの読み込みが完了する前に関数が呼び出されていることを示します。 – bamnet

+0

確かに、ビルドの完了後に作成されたindex.htmlを質問に追加しました –

答えて

1

読むからのindex.htmlであり、それはマーカーディレクティブはそれが変換パラメータとしてアドレスを取ることができ判明緯度/経度値を自動的に計算します。 解決方法は、すべてのgoogle.maps.Geocoderを削除し、これをhtmlで削除することです。

<marker position="{{myMapCtrl.address}}" title="Marker"></marker> 

とライブラリ

関連する問題