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.js
をindex.js
で管理したいと考えています。
を使用してみてください両方の場合にスクリプトが正しく読み込まれています。 404エラーはありません。 – charliesneath
あなたはinit-map.jsコードを共有できますか?あなたはコンソール上のエラーを見ることができますか? – Aadeelyoo