Many open source libraries are available to provide additional capabilities for
Maps JavaScript API. These libraries are versioned on
[GitHub](https://github.com/googlemaps) and published to
[npm](https://www.npmjs.com/).

## Web Components

Use [Maps JavaScript API Web
Components](https://developers.google.com/maps/documentation/web-components) to quickly add maps
functionality to your websites. Web Components encapsulate boilerplate code,
best practices, and responsive design, reducing complex map UIs into what is
effectively a single HTML element.
[### Extended Component Library (Beta)](https://github.com/googlemaps/extended-component-library "GitHub repository for @googlemaps/extended-component-library")

Google Maps Platform Extended Component
Library is a set of Web Components that helps developers build better maps
faster, and with less effort.

```
npm i @googlemaps/extended-component-library
```
[![NPM version for @googlemaps/extended-component-library](https://img.shields.io/npm/v/@googlemaps/extended-component-library?color=orange)
![NPM downloads for @googlemaps/extended-component-library](https://img.shields.io/npm/dm/@googlemaps/extended-component-library?color=orange)](https://www.npmjs.com/package/@googlemaps/extended-component-library "NPM registry listing for @googlemaps/extended-component-library") [![GitHub Repo stars](https://img.shields.io/github/stars/googlemaps/extended-component-library?label=GitHub+Stars)
![GitHub commit activity (branch)](https://img.shields.io/github/commit-activity/m/googlemaps/extended-component-library?label=commits)
![GitHub forks](https://img.shields.io/github/forks/googlemaps/extended-component-library)](https://github.com/googlemaps/extended-component-library "GitHub repository for @googlemaps/extended-component-library") [![Discord server badge](https://img.shields.io/discord/676948200904589322?label=discuss)](https://discord.gg/jRteCzP "Discuss this library with developers")

## Loading the API

Modern web applications may benefit from using the following libraries to load the Maps JavaScript API.
[### JS API loader](https://github.com/googlemaps/js-api-loader "GitHub repository for @googlemaps/js-api-loader")

Dynamically load the Maps JavaScript API with Promises.

```
npm i @googlemaps/js-api-loader
```
[![NPM version for @googlemaps/js-api-loader](https://img.shields.io/npm/v/@googlemaps/js-api-loader?color=orange)
![NPM downloads for @googlemaps/js-api-loader](https://img.shields.io/npm/dm/@googlemaps/js-api-loader?color=orange)](https://www.npmjs.com/package/@googlemaps/js-api-loader "NPM registry listing for @googlemaps/js-api-loader") [![GitHub Repo stars](https://img.shields.io/github/stars/googlemaps/js-api-loader?label=GitHub+Stars)
![GitHub commit activity (branch)](https://img.shields.io/github/commit-activity/m/googlemaps/js-api-loader?label=commits)
![GitHub forks](https://img.shields.io/github/forks/googlemaps/js-api-loader)](https://github.com/googlemaps/js-api-loader "GitHub repository for @googlemaps/js-api-loader") [![Discord server badge](https://img.shields.io/discord/676948200904589322?label=discuss)](https://discord.gg/jRteCzP "Discuss this library with developers")

## Using TypeScript

TypeScript users can get started with the following packages. Check out the [using TypeScript guide](https://developers.google.com/maps/documentation/javascript/using-typescript.md.txt) for additional information.
[### TypeScript types](https://github.com/definitelytyped/definitelytyped "GitHub repository for @types/google.maps")

TypeScript types for Maps JavaScript API

```
npm i -D @types/google.maps
```
[![NPM version for @types/google.maps](https://img.shields.io/npm/v/@types/google.maps?color=orange)
![NPM downloads for @types/google.maps](https://img.shields.io/npm/dm/@types/google.maps?color=orange)](https://www.npmjs.com/package/@types/google.maps "NPM registry listing for @types/google.maps") [![GitHub Repo stars](https://img.shields.io/github/stars/definitelytyped/definitelytyped?label=GitHub+Stars)
![GitHub commit activity (branch)](https://img.shields.io/github/commit-activity/m/definitelytyped/definitelytyped?label=commits)
![GitHub forks](https://img.shields.io/github/forks/definitelytyped/definitelytyped)](https://github.com/definitelytyped/definitelytyped "GitHub repository for @types/google.maps") [![Discord server badge](https://img.shields.io/discord/676948200904589322?label=discuss)](https://discord.gg/jRteCzP "Discuss this library with developers") [### TypeScript guards](https://github.com/googlemaps/js-typescript-guards "GitHub repository for @googlemaps/typescript-guards")

TypeScript guards to narrow union types.

```
npm i -D @googlemaps/typescript-guards
```
[![NPM version for @googlemaps/typescript-guards](https://img.shields.io/npm/v/@googlemaps/typescript-guards?color=orange)
![NPM downloads for @googlemaps/typescript-guards](https://img.shields.io/npm/dm/@googlemaps/typescript-guards?color=orange)](https://www.npmjs.com/package/@googlemaps/typescript-guards "NPM registry listing for @googlemaps/typescript-guards") [![GitHub Repo stars](https://img.shields.io/github/stars/googlemaps/js-typescript-guards?label=GitHub+Stars)
![GitHub commit activity (branch)](https://img.shields.io/github/commit-activity/m/googlemaps/js-typescript-guards?label=commits)
![GitHub forks](https://img.shields.io/github/forks/googlemaps/js-typescript-guards)](https://github.com/googlemaps/js-typescript-guards "GitHub repository for @googlemaps/typescript-guards") [![Discord server badge](https://img.shields.io/discord/676948200904589322?label=discuss)](https://discord.gg/jRteCzP "Discuss this library with developers")

## Using React

React users can get started with the following packages.
[### React Google Maps Library](https://github.com/visgl/react-google-maps "GitHub repository for @vis.gl/react-google-maps")

Components and hooks to integrate the Maps JavaScript API into React applications.

```
npm i -D @vis.gl/react-google-maps
```
[![NPM version for @vis.gl/react-google-maps](https://img.shields.io/npm/v/@vis.gl/react-google-maps?color=orange)
![NPM downloads for @vis.gl/react-google-maps](https://img.shields.io/npm/dm/@vis.gl/react-google-maps?color=orange)](https://www.npmjs.com/package/@vis.gl/react-google-maps "NPM registry listing for @vis.gl/react-google-maps") [![GitHub Repo stars](https://img.shields.io/github/stars/visgl/react-google-maps?label=GitHub+Stars)
![GitHub commit activity (branch)](https://img.shields.io/github/commit-activity/m/visgl/react-google-maps?label=commits)
![GitHub forks](https://img.shields.io/github/forks/visgl/react-google-maps)](https://github.com/visgl/react-google-maps "GitHub repository for @vis.gl/react-google-maps") [![Discord server badge](https://img.shields.io/discord/676948200904589322?label=discuss)](https://discord.gg/jRteCzP "Discuss this library with developers") [### React wrapper](https://github.com/googlemaps/react-wrapper "GitHub repository for @googlemaps/react-wrapper")

A wrapper component to declaratively load the Maps JavaScript API.

```
npm i @googlemaps/react-wrapper
```
[![NPM version for @googlemaps/react-wrapper](https://img.shields.io/npm/v/@googlemaps/react-wrapper?color=orange)
![NPM downloads for @googlemaps/react-wrapper](https://img.shields.io/npm/dm/@googlemaps/react-wrapper?color=orange)](https://www.npmjs.com/package/@googlemaps/react-wrapper "NPM registry listing for @googlemaps/react-wrapper") [![GitHub Repo stars](https://img.shields.io/github/stars/googlemaps/react-wrapper?label=GitHub+Stars)
![GitHub commit activity (branch)](https://img.shields.io/github/commit-activity/m/googlemaps/react-wrapper?label=commits)
![GitHub forks](https://img.shields.io/github/forks/googlemaps/react-wrapper)](https://github.com/googlemaps/react-wrapper "GitHub repository for @googlemaps/react-wrapper") [![Discord server badge](https://img.shields.io/discord/676948200904589322?label=discuss)](https://discord.gg/jRteCzP "Discuss this library with developers")

## Extending markers and overlays

The following libraries extend classes such as Marker and OverlayView.
[### Marker clusterer](https://github.com/googlemaps/js-markerclusterer "GitHub repository for @googlemaps/markerclusterer")

Creates and manages per-zoom-level clusters for large amounts of markers.

```
npm i @googlemaps/markerclusterer
```
[![NPM version for @googlemaps/markerclusterer](https://img.shields.io/npm/v/@googlemaps/markerclusterer?color=orange)
![NPM downloads for @googlemaps/markerclusterer](https://img.shields.io/npm/dm/@googlemaps/markerclusterer?color=orange)](https://www.npmjs.com/package/@googlemaps/markerclusterer "NPM registry listing for @googlemaps/markerclusterer") [![GitHub Repo stars](https://img.shields.io/github/stars/googlemaps/js-markerclusterer?label=GitHub+Stars)
![GitHub commit activity (branch)](https://img.shields.io/github/commit-activity/m/googlemaps/js-markerclusterer?label=commits)
![GitHub forks](https://img.shields.io/github/forks/googlemaps/js-markerclusterer)](https://github.com/googlemaps/js-markerclusterer "GitHub repository for @googlemaps/markerclusterer") [![Discord server badge](https://img.shields.io/discord/676948200904589322?label=discuss)](https://discord.gg/jRteCzP "Discuss this library with developers") [### Marker manager](https://github.com/googlemaps/js-markermanager "GitHub repository for @googlemaps/markermanager")

Adds and removes markers based upon map viewport changes.

```
npm i @googlemaps/markermanager
```
[![NPM version for @googlemaps/markermanager](https://img.shields.io/npm/v/@googlemaps/markermanager?color=orange)
![NPM downloads for @googlemaps/markermanager](https://img.shields.io/npm/dm/@googlemaps/markermanager?color=orange)](https://www.npmjs.com/package/@googlemaps/markermanager "NPM registry listing for @googlemaps/markermanager") [![GitHub Repo stars](https://img.shields.io/github/stars/googlemaps/js-markermanager?label=GitHub+Stars)
![GitHub commit activity (branch)](https://img.shields.io/github/commit-activity/m/googlemaps/js-markermanager?label=commits)
![GitHub forks](https://img.shields.io/github/forks/googlemaps/js-markermanager)](https://github.com/googlemaps/js-markermanager "GitHub repository for @googlemaps/markermanager") [![Discord server badge](https://img.shields.io/discord/676948200904589322?label=discuss)](https://discord.gg/jRteCzP "Discuss this library with developers") [### Web map service (WMS)](https://github.com/googlemaps/js-ogc "GitHub repository for @googlemaps/ogc")

Add Open Geospatial Consortium (OGC) layers such as a Web Map Service (WMS) to a map.

```
npm i @googlemaps/ogc
```
[![NPM version for @googlemaps/ogc](https://img.shields.io/npm/v/@googlemaps/ogc?color=orange)
![NPM downloads for @googlemaps/ogc](https://img.shields.io/npm/dm/@googlemaps/ogc?color=orange)](https://www.npmjs.com/package/@googlemaps/ogc "NPM registry listing for @googlemaps/ogc") [![GitHub Repo stars](https://img.shields.io/github/stars/googlemaps/js-ogc?label=GitHub+Stars)
![GitHub commit activity (branch)](https://img.shields.io/github/commit-activity/m/googlemaps/js-ogc?label=commits)
![GitHub forks](https://img.shields.io/github/forks/googlemaps/js-ogc)](https://github.com/googlemaps/js-ogc "GitHub repository for @googlemaps/ogc") [![Discord server badge](https://img.shields.io/discord/676948200904589322?label=discuss)](https://discord.gg/jRteCzP "Discuss this library with developers") [### Marker labels](https://github.com/googlemaps/js-markerwithlabel "GitHub repository for @googlemaps/markerwithlabel")

Add custom HTML labels to markers.

```
npm i @googlemaps/markerwithlabel
```
[![NPM version for @googlemaps/markerwithlabel](https://img.shields.io/npm/v/@googlemaps/markerwithlabel?color=orange)
![NPM downloads for @googlemaps/markerwithlabel](https://img.shields.io/npm/dm/@googlemaps/markerwithlabel?color=orange)](https://www.npmjs.com/package/@googlemaps/markerwithlabel "NPM registry listing for @googlemaps/markerwithlabel") [![GitHub Repo stars](https://img.shields.io/github/stars/googlemaps/js-markerwithlabel?label=GitHub+Stars)
![GitHub commit activity (branch)](https://img.shields.io/github/commit-activity/m/googlemaps/js-markerwithlabel?label=commits)
![GitHub forks](https://img.shields.io/github/forks/googlemaps/js-markerwithlabel)](https://github.com/googlemaps/js-markerwithlabel "GitHub repository for @googlemaps/markerwithlabel") [![Discord server badge](https://img.shields.io/discord/676948200904589322?label=discuss)](https://discord.gg/jRteCzP "Discuss this library with developers") [### Three.js overlays](https://github.com/googlemaps/js-three "GitHub repository for @googlemaps/three")

Use WebGL and ThreeJS for high performance visualizations.

```
npm i @googlemaps/three
```
[![NPM version for @googlemaps/three](https://img.shields.io/npm/v/@googlemaps/three?color=orange)
![NPM downloads for @googlemaps/three](https://img.shields.io/npm/dm/@googlemaps/three?color=orange)](https://www.npmjs.com/package/@googlemaps/three "NPM registry listing for @googlemaps/three") [![GitHub Repo stars](https://img.shields.io/github/stars/googlemaps/js-three?label=GitHub+Stars)
![GitHub commit activity (branch)](https://img.shields.io/github/commit-activity/m/googlemaps/js-three?label=commits)
![GitHub forks](https://img.shields.io/github/forks/googlemaps/js-three)](https://github.com/googlemaps/js-three "GitHub repository for @googlemaps/three") [![Discord server badge](https://img.shields.io/discord/676948200904589322?label=discuss)](https://discord.gg/jRteCzP "Discuss this library with developers") [### Deck.gl overlays](https://github.com/visgl/deck.gl "GitHub repository for @deck.gl/google-maps")

Use Deck.gl as a custom Google Maps overlay.

```
npm i @deck.gl/google-maps
```
[![NPM version for @deck.gl/google-maps](https://img.shields.io/npm/v/@deck.gl/google-maps?color=orange)
![NPM downloads for @deck.gl/google-maps](https://img.shields.io/npm/dm/@deck.gl/google-maps?color=orange)](https://www.npmjs.com/package/@deck.gl/google-maps "NPM registry listing for @deck.gl/google-maps") [![GitHub Repo stars](https://img.shields.io/github/stars/visgl/deck.gl?label=GitHub+Stars)
![GitHub commit activity (branch)](https://img.shields.io/github/commit-activity/m/visgl/deck.gl?label=commits)
![GitHub forks](https://img.shields.io/github/forks/visgl/deck.gl)](https://github.com/visgl/deck.gl "GitHub repository for @deck.gl/google-maps") [![Discord server badge](https://img.shields.io/discord/676948200904589322?label=discuss)](https://discord.gg/jRteCzP "Discuss this library with developers")

## Testing and linting

Use these libraries to ensure best practices and make testing easier for the Maps JavaScript API.
[### ESLint plugin](https://github.com/googlemaps/eslint-plugin-googlemaps "GitHub repository for eslint-plugin-googlemaps")

Use custom ESLint rules to lint your code.

```
npm i -D eslint-plugin-googlemaps
```
[![NPM version for eslint-plugin-googlemaps](https://img.shields.io/npm/v/eslint-plugin-googlemaps?color=orange)
![NPM downloads for eslint-plugin-googlemaps](https://img.shields.io/npm/dm/eslint-plugin-googlemaps?color=orange)](https://www.npmjs.com/package/eslint-plugin-googlemaps "NPM registry listing for eslint-plugin-googlemaps") [![GitHub Repo stars](https://img.shields.io/github/stars/googlemaps/eslint-plugin-googlemaps?label=GitHub+Stars)
![GitHub commit activity (branch)](https://img.shields.io/github/commit-activity/m/googlemaps/eslint-plugin-googlemaps?label=commits)
![GitHub forks](https://img.shields.io/github/forks/googlemaps/eslint-plugin-googlemaps)](https://github.com/googlemaps/eslint-plugin-googlemaps "GitHub repository for eslint-plugin-googlemaps") [![Discord server badge](https://img.shields.io/discord/676948200904589322?label=discuss)](https://discord.gg/jRteCzP "Discuss this library with developers") [### Jest mocks](https://github.com/googlemaps/js-jest-mocks "GitHub repository for @googlemaps/jest-mocks")

Mocks to use with the Jest testing library.

```
npm i -D @googlemaps/jest-mocks
```
[![NPM version for @googlemaps/jest-mocks](https://img.shields.io/npm/v/@googlemaps/jest-mocks?color=orange)
![NPM downloads for @googlemaps/jest-mocks](https://img.shields.io/npm/dm/@googlemaps/jest-mocks?color=orange)](https://www.npmjs.com/package/@googlemaps/jest-mocks "NPM registry listing for @googlemaps/jest-mocks") [![GitHub Repo stars](https://img.shields.io/github/stars/googlemaps/js-jest-mocks?label=GitHub+Stars)
![GitHub commit activity (branch)](https://img.shields.io/github/commit-activity/m/googlemaps/js-jest-mocks?label=commits)
![GitHub forks](https://img.shields.io/github/forks/googlemaps/js-jest-mocks)](https://github.com/googlemaps/js-jest-mocks "GitHub repository for @googlemaps/jest-mocks") [![Discord server badge](https://img.shields.io/discord/676948200904589322?label=discuss)](https://discord.gg/jRteCzP "Discuss this library with developers")

## Node.js Libraries

> [!NOTE]
> **Note:** The following libraries **do not work in browser environments** and are implemented for Node.js and server environments.

[### Node.js client library](https://github.com/googlemaps/google-maps-services-js "GitHub repository for @googlemaps/google-maps-services-js")

Node.js client library for making calls from cloud functions or serverside code.

```
npm i @googlemaps/google-maps-services-js
```
[![NPM version for @googlemaps/google-maps-services-js](https://img.shields.io/npm/v/@googlemaps/google-maps-services-js?color=orange)
![NPM downloads for @googlemaps/google-maps-services-js](https://img.shields.io/npm/dm/@googlemaps/google-maps-services-js?color=orange)](https://www.npmjs.com/package/@googlemaps/google-maps-services-js "NPM registry listing for @googlemaps/google-maps-services-js") [![GitHub Repo stars](https://img.shields.io/github/stars/googlemaps/google-maps-services-js?label=GitHub+Stars)
![GitHub commit activity (branch)](https://img.shields.io/github/commit-activity/m/googlemaps/google-maps-services-js?label=commits)
![GitHub forks](https://img.shields.io/github/forks/googlemaps/google-maps-services-js)](https://github.com/googlemaps/google-maps-services-js "GitHub repository for @googlemaps/google-maps-services-js") [![Discord server badge](https://img.shields.io/discord/676948200904589322?label=discuss)](https://discord.gg/jRteCzP "Discuss this library with developers") [### Polyline encoding](https://github.com/googlemaps/js-polyline-codec "GitHub repository for @googlemaps/polyline-codec")

Encode and decode polylines in Node.js.

```
npm i @googlemaps/polyline-codec
```
[![NPM version for @googlemaps/polyline-codec](https://img.shields.io/npm/v/@googlemaps/polyline-codec?color=orange)
![NPM downloads for @googlemaps/polyline-codec](https://img.shields.io/npm/dm/@googlemaps/polyline-codec?color=orange)](https://www.npmjs.com/package/@googlemaps/polyline-codec "NPM registry listing for @googlemaps/polyline-codec") [![GitHub Repo stars](https://img.shields.io/github/stars/googlemaps/js-polyline-codec?label=GitHub+Stars)
![GitHub commit activity (branch)](https://img.shields.io/github/commit-activity/m/googlemaps/js-polyline-codec?label=commits)
![GitHub forks](https://img.shields.io/github/forks/googlemaps/js-polyline-codec)](https://github.com/googlemaps/js-polyline-codec "GitHub repository for @googlemaps/polyline-codec") [![Discord server badge](https://img.shields.io/discord/676948200904589322?label=discuss)](https://discord.gg/jRteCzP "Discuss this library with developers") [### URL signing](https://github.com/googlemaps/js-url-signature "GitHub repository for @googlemaps/url-signature")

Sign URLs in Node.js for additional security.

```
npm i @googlemaps/url-signature
```
[![NPM version for @googlemaps/url-signature](https://img.shields.io/npm/v/@googlemaps/url-signature?color=orange)
![NPM downloads for @googlemaps/url-signature](https://img.shields.io/npm/dm/@googlemaps/url-signature?color=orange)](https://www.npmjs.com/package/@googlemaps/url-signature "NPM registry listing for @googlemaps/url-signature") [![GitHub Repo stars](https://img.shields.io/github/stars/googlemaps/js-url-signature?label=GitHub+Stars)
![GitHub commit activity (branch)](https://img.shields.io/github/commit-activity/m/googlemaps/js-url-signature?label=commits)
![GitHub forks](https://img.shields.io/github/forks/googlemaps/js-url-signature)](https://github.com/googlemaps/js-url-signature "GitHub repository for @googlemaps/url-signature") [![Discord server badge](https://img.shields.io/discord/676948200904589322?label=discuss)](https://discord.gg/jRteCzP "Discuss this library with developers")