Google Maps API デモ - Google 未定義

Question

Google Maps API を実装しようとしており、公式デモに従っています。

コードをコピーし、1 つだけ変更を加えました:

// エラーが発生します: オリジンから 'file:///D:/Desktop/Stuff/map-test/test.js' のスクリプトにアクセスします「null」は CORS ポリシーによってブロックされました: クロスオリジンリクエストは、プロトコル スキーム: http、data、isolation-app、chrome-extension、chrome、https、chrome-untrusted でのみサポートされます。
    <script type="module" src="./index.js"></script>

    // これに変更しました
    <script src="./index.js"></script>

その結果、次のエラーが表示されます:

ReferenceError: Google が initMap で定義されていません

これはスクリプトから type="module" を削除したことが原因だと思いますか?このためにモジュールをインポートするには自分でモジュールをホストする必要があるように見えるため、ほとんどの人はどのように実装しますか?

コードを次のように変更しましたが、警告がスローされます。

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

// 警告: Google Maps JavaScript API はコールバックなしで直接読み込まれています。これはサポートされていないため、競合状態や次善のパフォーマンスが発生する可能性があります。サポートされている読み込みパターンについては、https://goo.gle/js-api-loading< をご覧ください。 /pre>
<p>ありがとうございます! </p>
<p>編集者:</p>
<p>HTTP サーバーを使用してファイルをホストすることに関する以前の回答を読みましたが、JS ファイルをホストするという意味を誤解していました。代わりに、HTML ファイルを直接開く (つまり、ファイル エクスプローラーでダブルクリックする) のではなく、テスト目的で HTML ファイルをローカルでホストする必要があります。 </p>
<p>したがって、python3 を使用します:</p>
<pre class="brush:php;toolbar:false;">#index.html を含むディレクトリ:
python3 -m http.server 8080

http://localhost:8080/index.html にアクセスするとうまくいきます。ありがとう！

Answer 1

HTTP サーバーを使用してファイルをホストすることに関する以前の回答を読みましたが、JS ファイルをホストするという意味を誤解していました。代わりに、HTML ファイルを直接開く (つまり、ファイル エクスプローラーでダブルクリックする) のではなく、テスト目的で HTML ファイルをローカルでホストする必要があります。

したがって、python3を使用してください:

リーリー

http://localhost:8080/index.html にアクセスするとうまくいきます。ありがとう！