移行: google.load での「Maps」モジュール

2021 年 10 月 13 日に、Google は google.load で「Maps」モジュールを提供するサービスを終了します。つまり、2021 年 10 月 13 日以降に「Maps」モジュールを google.load で使用しようとするとエラー（「モジュール「maps」はサポートされていません」）が発生し、地図は読み込まれません。障害の発生を防ぐため、以下に説明するいずれかの代替手段に切り替えてください。

必要なご対応

まず、google.load ローダを読み込む <script> タグを削除してから、google.load への呼び出しを削除します。Google ローダを別の目的で使用する場合は、ローダの <script> タグをそのまま残しても問題ありません。

次に、Maps JavaScript API を読み込む新しい方法（次のいずれかのオプション）を実装します。

Google ローダを使用した現行のサンプル

以下は、Google ローダを使用して Maps JavaScript API を読み込んでいる現行のサンプルです（<script> ブロックが 2 つあります）。

以前の方法

<script type='text/javascript' src='https://www.google.com/jsapi'></script>
<script type='text/javascript'>
google.load("maps", "3.exp", {
    "callback": initMap,
    "key": "YOUR_KEY",
    "libraries": "places,visualization"
});
function initMap() {
  // Google Maps JS API is loaded and available
}
</script>

この方法を使用すると、ページの読み込みと同時に Maps JavaScript API が読み込まれます。インライン読み込みを実装するには、まず www.google.com/jsapi を読み込む <script> タグ（「以前の方法」）を次のサンプルに示されている <script> で置き換えます。

<script async src="https://maps.googleapis.com/maps/api/js?libraries=places,visualization&key=YOUR_API_KEY&v=weekly&callback=initMap">
</script>

次に、不要になった google.load 関数呼び出しを JavaScript コードから削除します。次のサンプルには、空の initMap() 関数があります。この関数は、マップ ライブラリが正常に読み込まれたときに呼び出されます。

<script type='text/javascript'>
function initMap() {
  // Google Maps JS API is loaded and available
}
</script>

詳しくは、こちらのドキュメントをご覧ください。

別の JavaScript ファイルからの動的読み込み

動的読み込みを行うと、Maps JavaScript API を読み込むタイミングを制御できます。たとえば、ユーザーがボタンのクリックなどのアクションを実行するまで、Maps JavaScript API を読み込むのを待つことができます。動的読み込みを実装するには、以下のサンプルのように、まず www.google.com/jsapi を読み込む <script> タグ（「以前の方法」）をコードに置き換えて、<script> タグをプログラマティックに追加します。

var script = document.createElement('script');
script.src =
'https://maps.googleapis.com/maps/api/js?libraries=places,visualization&key=YOUR_API_KEY&v=weekly&callback=initMap';
script.async=true;

次に、以下のように、コールバック関数を window オブジェクトに追加します。

window.initMap = function() {
  // Google Maps JS API is loaded and available
};

最後に、以下のようにページのヘッダーに <script> タグを追加します。

document.head.appendChild(script);

詳しくは、こちらのドキュメントをご覧ください。