さまざまなオープンソース ライブラリで、Maps JavaScript API 向けの追加機能が提供されています。これらのライブラリは GitHub でバージョニングされ、NPM に公開されます。
ウェブ コンポーネント
Maps JavaScript API のウェブ コンポーネントを使用すると、ウェブサイトに手軽に地図機能を追加できます。ウェブ コンポーネントには、ボイラープレート コード、ベスト プラクティス、レスポンシブ デザインがカプセル化されており、複雑な地図 UI を、実質的に単一の HTML 要素として扱うことができます。
Extended Component Library(ベータ版)
Google Maps Platform Extended Component Library は、優れた地図の作成の迅速化と省力化を助けるウェブ コンポーネント集です。
npm i @googlemaps/extended-component-library
API の読み込み
最新のウェブ アプリケーションでは、次のライブラリを使用して Maps JavaScript API を読み込むことをおすすめします。
JS API ローダ
Maps JavaScript API を動的に読み込み Promise を返します
npm i @googlemaps/js-api-loader
TypeScript の使用
TypeScript は、次のパッケージを使用してご利用を開始できます。詳しくは、TypeScript のご使用ガイドをご覧ください。
TypeScript の型
Maps JavaScript API の TypeScript の型
npm i -D @types/google.maps
TypeScript の型ガード
Union 型を絞り込む TypeScript の型ガード
npm i -D @googlemaps/typescript-guards
React の使用
React は、次のパッケージを使用してご利用を開始できます。
React Google Maps Library
Maps JavaScript API を React のアプリケーションに統合するコンポーネントとフック
npm i -D @vis.gl/react-google-maps
React ラッパー
Maps JavaScript API を宣言的に読み込むラッパー コンポーネント
npm i @googlemaps/react-wrapper
マーカーとオーバーレイの拡張
以下のライブラリは、Marker や OverlayView などのクラスを拡張します。
マーカー クラスタ
大量のマーカーのズームレベルごとのクラスタを作成、管理します。
npm i @googlemaps/markerclusterer
マーカー マネージャー
地図のビューポートの変化に基づいてマーカーを追加、削除します。
npm i @googlemaps/markermanager
Web Mapping Service(WMS)
Web Mapping Service(WMS)などの Open Geospatial Consortium(OGC)レイヤを地図に追加します。
npm i @googlemaps/ogc
マーカーラベル
マーカーにカスタムの HTML ラベルを追加します。
npm i @googlemaps/markerwithlabel
Three.js オーバーレイ
WebGL と ThreeJS を使用して、高パフォーマンスのビジュアリゼーションを実現します。
npm i @googlemaps/three
Deck.gl オーバーレイ
Google マップのカスタム オーバーレイとして Deck.gl を使用します。
npm i @deck.gl/google-maps
テストと lint チェック
これらのライブラリを使うと、ベスト プラクティスが確実に使用され、Maps JavaScript API のテストが容易になります。
ESLint プラグイン
カスタム ESLint ルールを使用して、コードを lint チェックします。
npm i -D eslint-plugin-googlemaps
Jest モック
Jest テスト ライブラリで使用するモック
npm i -D @googlemaps/jest-mocks
Node.js ライブラリ
Node.js クライアント ライブラリ
Cloud Functions またはサーバー側のコードから呼び出しを行う Node.js クライアント ライブラリ
npm i @googlemaps/google-maps-services-js
ポリラインのエンコード
Node.js でポリラインをエンコードおよびデコードします。
npm i @googlemaps/polyline-codec
URL 署名
セキュリティを強化するため、Node.js で URL 署名を行います。
npm i @googlemaps/url-signature