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

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

ウェブ コンポーネント

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

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

npm i @googlemaps/extended-component-library
@googlemaps/extended-component-library の NPM バージョン @googlemaps/extended-component-library の NPM ダウンロード数 GitHub のリポジトリのスター数 GitHub のコミット アクティビティ（ブランチ） GitHub のフォーク数 Discord サーバーバッジ

API の読み込み

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

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

npm i @googlemaps/js-api-loader
@googlemaps/js-api-loader の NPM バージョン @googlemaps/js-api-loader の NPM ダウンロード数 GitHub のリポジトリのスター数 GitHub のコミット アクティビティ（ブランチ） GitHub のフォーク数 Discord サーバーバッジ

TypeScript の使用

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

Maps JavaScript API の TypeScript の型

npm i -D @types/google.maps
@types/google.maps の NPM バージョン @types/google.maps の NPM ダウンロード数 GitHub のリポジトリのスター数 GitHub のコミット アクティビティ（ブランチ） GitHub のフォーク数 Discord サーバーバッジ

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

npm i -D @googlemaps/typescript-guards
@googlemaps/typescript-guards の NPM バージョン @googlemaps/typescript-guards の NPM ダウンロード数 GitHub のリポジトリのスター数 GitHub のコミット アクティビティ（ブランチ） GitHub のフォーク数 Discord サーバーバッジ

React の使用

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

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

npm i -D @vis.gl/react-google-maps
@vis.gl/react-google-maps の NPM バージョン @vis.gl/react-google-maps の NPM ダウンロード数 GitHub のリポジトリのスター数 GitHub のコミット アクティビティ（ブランチ） GitHub のフォーク数 Discord サーバーバッジ

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

npm i @googlemaps/react-wrapper
@googlemaps/react-wrapper の NPM バージョン @googlemaps/react-wrapper の NPM ダウンロード数 GitHub のリポジトリのスター数 GitHub のコミット アクティビティ（ブランチ） GitHub のフォーク数 Discord サーバーバッジ

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

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

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

npm i @googlemaps/markerclusterer
@googlemaps/markerclusterer の NPM バージョン @googlemaps/markerclusterer の NPM ダウンロード数 GitHub のリポジトリのスター数 GitHub のコミット アクティビティ（ブランチ） GitHub のフォーク数 Discord サーバーバッジ

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

npm i @googlemaps/markermanager
@googlemaps/markermanager の NPM バージョン @googlemaps/markermanager の NPM ダウンロード数 GitHub のリポジトリのスター数 GitHub のコミット アクティビティ（ブランチ） GitHub のフォーク数 Discord サーバーバッジ

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

npm i @googlemaps/ogc
@googlemaps/ogc の NPM バージョン @googlemaps/ogc の NPM ダウンロード数 GitHub のリポジトリのスター数 GitHub のコミット アクティビティ（ブランチ） GitHub のフォーク数 Discord サーバーバッジ

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

npm i @googlemaps/markerwithlabel
@googlemaps/markerwithlabel の NPM バージョン @googlemaps/markerwithlabel の NPM ダウンロード数 GitHub のリポジトリのスター数 GitHub のコミット アクティビティ（ブランチ） GitHub のフォーク数 Discord サーバーバッジ

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

npm i @googlemaps/three
@googlemaps/three の NPM バージョン @googlemaps/three の NPM ダウンロード数 GitHub のリポジトリのスター数 GitHub のコミット アクティビティ（ブランチ） GitHub のフォーク数 Discord サーバーバッジ

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

npm i @deck.gl/google-maps
@deck.gl/google-maps の NPM バージョン @deck.gl/google-maps の NPM ダウンロード数 GitHub のリポジトリのスター数 GitHub のコミット アクティビティ（ブランチ） GitHub のフォーク数 Discord サーバーバッジ

テストと lint チェック

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

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

npm i -D eslint-plugin-googlemaps
eslint-plugin-googlemaps の NPM バージョン eslint-plugin-googlemaps の NPM ダウンロード数 GitHub のリポジトリのスター数 GitHub のコミット アクティビティ（ブランチ） GitHub のフォーク数 Discord サーバーバッジ

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

npm i -D @googlemaps/jest-mocks
@googlemaps/jest-mocks の NPM バージョン @googlemaps/jest-mocks の NPM ダウンロード数 GitHub のリポジトリのスター数 GitHub のコミット アクティビティ（ブランチ） GitHub のフォーク数 Discord サーバーバッジ

Node.js ライブラリ

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

npm i @googlemaps/google-maps-services-js
@googlemaps/google-maps-services-js の NPM バージョン @googlemaps/google-maps-services-js の NPM ダウンロード数 GitHub のリポジトリのスター数 GitHub のコミット アクティビティ（ブランチ） GitHub のフォーク数 Discord サーバーバッジ

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

npm i @googlemaps/polyline-codec
@googlemaps/polyline-codec の NPM バージョン @googlemaps/polyline-codec の NPM ダウンロード数 GitHub のリポジトリのスター数 GitHub のコミット アクティビティ（ブランチ） GitHub のフォーク数 Discord サーバーバッジ

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

npm i @googlemaps/url-signature
@googlemaps/url-signature の NPM バージョン @googlemaps/url-signature の NPM ダウンロード数 GitHub のリポジトリのスター数 GitHub のコミット アクティビティ（ブランチ） GitHub のフォーク数 Discord サーバーバッジ