Googleマップのコールバックが読み込まれていませんか？

Question

GoogleはGoogleマップを初期化するために、このスクリプトを提供しています：

<script async defer src="https://maps.googleapis.com/maps/api/js key=YOUR_API_KEY&callback=initMap"> 

私が注目したい部分がある：

callback=initMap 

スクリプトがasync deferにロードされ、ノンブロッキングであるされているので、実際にどのようなこの関数を保持するファイルがまだロードされていないときにinitMapコールバックが呼び出されているときに発生しますか？

この機能が外部ファイルに置かれ、Googleマップスクリプトの後に読み込まれると仮定します。これは、コールバックがその関数を呼び出そうとしたときに、時間内にロードされないかもしれない別のサーバから来る可能性があります。

関数を呼び出そうとすると失敗し、これを一度だけ行いますか？

Answer 1

スクリプトが非同期延期にロードされていると を非ブロックされているのでinitMapコールバックが と呼ばれているときに、この機能を保持しているファイルがまだロードされていない一方で、何が実際に起こりますか？

あなたはinitMap is not definedのような例外を取得します。

ソリューションだけdefer属性を使用して、正しい順序でJavaScriptファイルをロードすることです：

<script defer src="https://example.com/initMap.js"></script> 
<script defer src="https://maps.googleapis.com/maps/api/js key=YOUR_API_KEY&callback=initMap"> 

defer属性は、並行して、スクリプトをロードしますが、（正気のブラウザで）実行の順序を保持します。

もう1つの解決策は、initMap関数をHTMLページに埋め込み、その後に<script defer>または<script async defer>を配置することです。