es6/reactのある外部ライブラリは '定義されていません'

Question

私は間違いなくgoogleのライブラリを読み込んでいますが、私は'google' not definedを取得しています（少なくとも私はchromeの開発ツールから見ています）。

私は非常に単純なフロントエンドのWebページのgoogle places apiをヒットしようとしています。フロントエンドのWeb開発者（リアクションを含む）の学習では、基本的にnpmを使用する方法と、すべてをインポートする方法を学びましたが、外部ライブラリを使用すると困っています。

私は

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyBq8oeYyntc6d0JP5iaqMtPMTBhxiItdJw&libraries=places"></script>

が、今は私がこの

よう ReactDOM.render(...)前に私のindex.jsで little-loaderを使用しようとしている私のindex.htmlで、この経由してGoogleプレイスのライブラリをロードすることができるはずです

import LittleLoader from 'little-loader'; 

LittleLoader(
    "https://maps.googleapis.com/maps/api/js?key=AIzaSyBq8oeYyntc6d0JP5iaqMtPMTBhxiItdJw&libraries=places", 
    function (err) { 
     console.log("hi paul!"); 

     // This is just to check I *have* the google library loaded/working 
     var pyrmont = new google.maps.LatLng(-33.8665433,151.1956316); 
}); 

オンラインのすべての例は、これが（タグ付きで、または少なくともリトルローダーのコールバックで）機能するはずです。しかし、私が何をしても、私は./src/index.js Line 14: 'google' is not defined no-undefになります。私はを実行する私はちょうどgoogleをコンソールに入力すれば、chrome devのコンソール - >ソースのgoogle mapsライブラリを参照してオブジェクトを取得します。

だから私の通常のJavaScriptでGoogleのライブラリを使用するにはどうすればいいですか？私の最高の推測は、どういうわけか、ロードを延期/非同期にしているが、その使用にsetTimeoutを設定すると、google.maps.LatLng...は役に立ちません。

私はこのフロントエンドの開発の世界を理解しようとしています。私はES6 jsの考え方で少し失われています。私はこれが簡単だと確信していますが、私は苦労しています！

Answer 1

Google MapsのAPIは非同期で自身を初期化し、二つのことが起こるまで、それを使用することはできません。

1. Google MapsのAPI用のコードは、あなたのLittleLoader()機能によってロードされます。
2. Googleマップは独自の非同期初期化を完了します。両方が行われたときに知って

一つの方法は、GoogleマップのAPIのURLでcallback=xxxxクエリパラメータを指定することです。その後、読み込みが完了すると、その関数が呼び出され、Googleマップのすべての機能を使用できます。上記の両方の項目が完了すると、そのコールバックが呼び出されます。

import LittleLoader from 'little-loader'; https://developers.google.com/maps/documentation/javascript/tutorial：

function initMap() { 
    // This is just to check I *have* the google library loaded/working 
    var pyrmont = new google.maps.LatLng(-33.8665433,151.1956316); 
} 

LittleLoader(
    "https://maps.googleapis.com/maps/api/js?key=AIzaSyBq8oeYyntc6d0JP5iaqMtPMTBhxiItdJw&libraries=places&callback=initMap", 
    function (err) { 
     console.log("hi paul!"); 
}); 

あなたはここでは例のこのタイプを見ることができます。

私はこれが正しく動作するためにコールバック関数がグローバルスコープからアクセスできるようにする必要があることを疑います。

同様の例ここでは、動的スクリプトローディング使用：http://jsfiddle.net/doktormolle/7cu2F/

をそして、ここで同じこと：Dynamically Loading Google Maps api's

Answer 2

メインのindex.htmlファイルにスクリプトを追加してみてください。アプリ全体で利用可能になるはずです。

最新の質問

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.

 関連する問題

• 1.
• 2.
• 3.
• 4.
• 5.
• 6.
• 7.
• 8.
• 9.
• 10.