今回は、Maps JavaScript API の読み込み方法に関する 3 つの大きな改善点をご紹介します。3 つの改善点とは、柔軟なライブラリ読み込み用の API、新しいインライン ブートストラップ ローダ、一連のパフォーマンスの向上です。
柔軟なライブラリの読み込み
Maps JavaScript API は、API を読み込むときに開発者が指定して追加できるライブラリで構成されています。これらのライブラリは、ウェブサイト上に地図を表示する以外のことも行います。たとえば、開発者は Places API にアクセスするために、プレイス ライブラリを読み込むことができます。ただし、これらのライブラリの読み込みは柔軟性が低く、これまでは Maps JavaScript API の初期読み込み時にしか指定できなかったため（libraries=places URL パラメータを介するなど）、起動時の読み込みに時間がかかっていました。
そこで、今回、ライブラリを動的にインポートするための API を提供することになりました。たとえば、次のようなものです。
await google.maps.importLibrary("places");
このように定義することで、ユーザーが必要であると判断したときにプレイス ライブラリが読み込みまれるように変更されます。たとえば、ユーザーのアクションの後に、場所に関する情報が必要になった場合です。さらに良いことに、以下のコマンドを介して google.maps.places.Place のような長い名前空間の使用を避けることもできるようになりました。
const {Place} = await google.maps.importLibrary("places");
ただし、google.maps.places 名前空間は引き続き設定されます。
また、複数のライブラリを並行してインポートできるようにもなりました。
const [placesLibrary, geocodingLibrary] = await Promise.all([
google.maps.importLibrary("places"),
google.maps.importLibrary("geocoding")
]);
さらに、ドキュメントに書かれている google.maps.importLibrary() を介して Maps JavaScript API のすべてのクラスを利用できるようにしました。たとえば、ユーザーは次のコマンドを介して StreetViewPanorama クラスにアクセスできます。
const {StreetViewPanorama} = await google.maps.importLibrary("streetView");
これで、Maps JavaScript API の依存関係を読み込むタイミングをより正確かつ効率的に制御できるようになります。
新しいインライン ブートストラップ ローダ
もう一つの問題は、Maps JavaScript API <script> ローダを使用するには、グローバルに定義された関数に対するコールバック パラメータを定義しなければならないことです。現在、開発者の皆様には、API の読み込みを待たずにすぐに google.maps.importLibrary() を使用できる新しいインライン ブートストラップ ローダの使用をおすすめしています。これにより、面倒なグローバル コールバックを回避し、Promises または async/await を使用して、Maps JavaScript API の準備が完了するタイミングを追跡することもできます。
URL で <script> タグを指定する代わりに、ほんの小さなインライン JavaScript である 新しいインライン ブートストラップ ローダを含めることができます。このコードは構成パラメータを受け取り、ブートストラップ URL を構築して、すぐに使用を開始できるように google.maps.importLibrary() を定義します。最初に google.maps.importLibrary() が呼び出されるまで、Maps JavaScript API のどの部分も読み込まれません。この新しいインライン ブートストラップ ローダはページごとに複数回使用することもできます。なお、最初の構成のみが使用されます。また、新しいローダを使用すると、Maps JavaScript API の読み込み時に問題が発生した場合（古いコールバック メカニズムがではサポートしてされていなかったもの）、google.maps.importLibrary() Promise によって適切に拒否されます。
パフォーマンスの向上
今年は、エンドユーザーの読み込み時間を自動的に短縮できるように、Maps JavaScript API にもいくつかの変更を加えました。静的 JavaScript ファイルの Brotli 圧縮を有効にし、画面外のマップに対して自動遅延読み込みを導入しました。また、今年の後半には、より新しいコードの出力ができるように JavaScript をアップグレードし、より多くのブラウザの組み込み機能を利用してファイルサイズを削減する予定です。
Maps JavaScript API が <script> ローダを使用する理由
多くの開発者から、なぜ npm 経由で配布しないのかと質問されることがあります。Google は API にアクセスするためのオプションを定期的に評価しており、ほとんどの JS パッケージが npm 経由で配布されている世界では <script> タグが時代遅れに見える可能性があることを十分に認識しています。
Google が得た重要なインサイトに、Maps JavaScript API を採用している多くのウェブサイト（大小問わず）は積極的にメンテナンスされていないというものがあり、Google はこうしたウェブサイトの機能を維持できるようにできる限りのことを行いたいと考えています。UI レンダリングを構成するコードはかなり複雑で、内部で多数のバックエンド サービスを利用します。長年にわたってブラウザやバックエンド サービスに無数の変更が加えられたため、正しい動作を続けるためには、Maps JavaScript API の内部動作を更新する必要がありました。アクセシビリティ、プライバシー、セキュリティに関する重要な更新もありました。また、各ウェブサイトは API を Google から直接読み込むため、こうした更新をすべて自動的に取得できています。積極的に管理されているウェブサイトであっても、Maps JavaScript API を使用する価値の一つは、この種の変更によって引き起こされる予期せぬ破損の多く（およびその結果として生じる、修正を見つけてデプロイするというストレスのかかる作業）を回避できることです。これは、依存関係の管理に取り組む代わりに、自分自身の目標に集中してより多くの時間を費やすことができることを意味します。
<script> の読み込みと npm との間のギャップを埋められるものを探している開発者のために、Google Maps Platform は @googlemaps/js-api-loader パッケージを提供しています。新しい google.maps.importLibrary() は、Loader.importLibrary() を介して js-api-loader とともに使用することもできます。
また、Maps JavaScript API の新しいリリースを採用する時期をより細かくコントロールしたいと考えている開発者の方は、利用可能なオプションをご確認ください。Maps JavaScript API の各バージョンは、1 年間利用することができます。
Google Maps Platform に関する詳しい情報はこちらをご覧ください。ご質問やフィードバックはページ右上の「お問い合わせ」より承っております。
Posted by 丸山 智康 (Tomoyasu Maruyama) - Developer Relations Engineer
