2017-04-15 7 views
0

Google Maps APIの読み込みが完了したときに呼び出されるはずの関数initMap()があります。この関数は、Webアプリケーションで使用するマップのすべての設定を管理します。WebpackバンドルにGoogle Maps APIコールバックスクリプトをロードする際の問題点

initMap()は、init-map.jsというファイルに存在します。

私はWebpackに移行しているので、init-map.jsはを使用してindex.jsに含まれています。

エラーInvalidValueError: initMap is not a functionが発生しますが、init-map.jsのタグを使用してロードすると、エラーは発生しません。

は、エラーが発生します。問題のない

<html> 
    <head> 
     ... 
     <script src="bundle.js"></script> <!-- init-map.js is required in this file --> 
    </head> 
    <body> 
     .... 
     <script src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap" async defer></script> 
    </body> 
</html> 

作品:

<html> 
    <head> 
     ... 
     <script src="bundle.js"></script> 
     <script src="./scripts/init-map.js"></script> 
    </head> 
    <body> 
     .... 
     <script src="https://maps.googleapis.com/maps/api/js?key=&callback=initMap" async defer></script> 
    </body> 
</html> 

私はそれがコールバックを行うと、GoogleマップAPIのinitMap()が利用できるようにする方法を理解していません。

またinit-map.jsindex.jsで管理したいと考えています。

答えて

-1

呼び出し元を確認してください。 404エラーを投げていますか?要素を点検の上 - >ネットワーク

に "/scripts/init-map.js" または "スクリプト/ initを-map.js" "./scripts/init-map.js" から

+0

を使用してみてください両方の場合にスクリプトが正しく読み込まれています。 404エラーはありません。 – charliesneath

+0

あなたはinit-map.jsコードを共有できますか?あなたはコンソール上のエラーを見ることができますか? – Aadeelyoo

関連する問題