オープンソース ライブラリ

さまざまなオープンソース ライブラリで、Maps JavaScript API 向けの追加機能が提供されています。これらのライブラリは GitHub でバージョニングされ、NPM に公開されます。

ウェブ コンポーネント

Maps JavaScript API のウェブ コンポーネントを使用すると、ウェブサイトに手軽に地図機能を追加できます。ウェブ コンポーネントには、ボイラープレート コード、ベスト プラクティス、レスポンシブ デザインがカプセル化されており、複雑な地図 UI を、実質的に単一の HTML 要素として扱うことができます。

Google Maps Platform Extended Component Library は、優れた地図の作成の迅速化と省力化を助けるウェブ コンポーネント集です。

npm i @googlemaps/extended-component-library

API の読み込み

最新のウェブ アプリケーションでは、次のライブラリを使用して Maps JavaScript API を読み込むことをおすすめします。

Maps JavaScript API を動的に読み込み Promise を返します

npm i @googlemaps/js-api-loader

TypeScript の使用

TypeScript は、次のパッケージを使用してご利用を開始できます。詳しくは、TypeScript のご使用ガイドをご覧ください。

Maps JavaScript API の TypeScript の型

npm i -D @types/google.maps

Union 型を絞り込む TypeScript の型ガード

npm i -D @googlemaps/typescript-guards

React の使用

React は、次のパッケージを使用してご利用を開始できます。

Maps JavaScript API を宣言的に読み込むラッパー コンポーネント

npm i @googlemaps/react-wrapper

Maps JavaScript API を React のアプリケーションに統合するコンポーネントとフック

npm i -D @vis.gl/react-google-maps

マーカーとオーバーレイの拡張

以下のライブラリは、Marker や OverlayView などのクラスを拡張します。

大量のマーカーのズームレベルごとのクラスタを作成、管理します。

npm i @googlemaps/markerclusterer

地図のビューポートの変化に基づいてマーカーを追加、削除します。

npm i @googlemaps/markermanager

Web Mapping Service(WMS)などの Open Geospatial Consortium(OGC)レイヤを地図に追加します。

npm i @googlemaps/ogc

マーカーにカスタムの HTML ラベルを追加します。

npm i @googlemaps/markerwithlabel

WebGL と ThreeJS を使用して、高パフォーマンスのビジュアリゼーションを実現します。

npm i @googlemaps/three

Google マップのカスタム オーバーレイとして Deck.gl を使用します。

npm i @deck.gl/google-maps

テストと lint チェック

これらのライブラリを使うと、ベスト プラクティスが確実に使用され、Maps JavaScript API のテストが容易になります。

カスタム ESLint ルールを使用して、コードを lint チェックします。

npm i -D eslint-plugin-googlemaps

Jest テスト ライブラリで使用するモック

npm i -D @googlemaps/jest-mocks

Node.js ライブラリ

Cloud Functions またはサーバー側のコードから呼び出しを行う Node.js クライアント ライブラリ

npm i @googlemaps/google-maps-services-js

Node.js でポリラインをエンコードおよびデコードします。

npm i @googlemaps/polyline-codec

セキュリティを強化するため、Node.js で URL 署名を行います。

npm i @googlemaps/url-signature