最新のウェブ アプリケーションに Google Maps Platform JavaScript を読み込む

※この投稿は米国時間 2021 年 4 月 1 日に、Google Cloud blog に投稿されたものの抄訳です。

このたび、最新型のウェブ アプリケーションで Maps JavaScript API を簡単に使用できるようにするオープンソース ライブラリが 2 つ公開されました。これまで、Maps JavaScript API を使用するには、HTML ドキュメントにスクリプトタグを挿入する必要がありました。しかし、この方法の場合、スクリプトタグの属性の選択に注意が必要なだけでなく、ブラウザが JavaScript を解析、実行する仕組みについて精通していることが求められます。こうした手順を簡略化するためにリリースされたのが、NPM の @googlemaps/js-api-loader および @googlemaps/react-wrapper モジュールです。

1 つ目のライブラリ @googlemaps/js-api-loader は、Maps JavaScript API を動的に読み込み、プロセスを Promise でラップします。つまり、js-api-loader をインポートすれば、HTML ではなく JavaScript によって Maps JS API を読み込むことが可能となります。また、このライブラリでは API の読み込みオプション（バージョン、ライブラリ、apiKey など）がすべてサポートされており、オプション オブジェクトとして渡されます。さらに、ネットワーク エラーが発生したときに再試行されるほか、シングルトンのパターンによって Maps JavaScript API の二重読み込みを回避できるといった特長もあります。このライブラリの使用方法を以下に示します。

2 つ目のライブラリ @googlemaps/react-wrapper は、Maps JavaScript API を必要とする子コンポーネントのラップ用の React コンポーネントを提供します。この React コンポーネントは、まず Maps JS API を読み込んで、子コンポーネントがこの API を使用できるように準備します。React コンポーネントは、@googlemaps/js-api-loader のオプションと一致するプロパティを受け付ける仕組みになっているので、ウェブ アプリケーションで何回でも安全に使用することが可能です。以下に使用例を示します。

これらのライブラリは、HTML ドキュメントへのスクリプトタグの挿入を行い、非同期の複雑性を抽象化しながら Promise および React フックを提供します。内部の実装は、以下に示す従来と同じ形式となります。

スクリプトの読み込みの方法について詳しくは、Maps JavaScript API の概要をご覧ください。

Google Maps Platform の詳細については、ウェブサイトをご覧ください。ウェブサイトでは  Google Maps Platform の詳細やニュースレターの購読などをご案内しています。

-Developer Relations エンジニア Justin Poehnelt