Many open source libraries are available to provide additional capabilities for Maps JavaScript API. These libraries are versioned on GitHub and published to npm.
Web Components
Use Maps JavaScript API 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)
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
Loading the API
Modern web applications may benefit from using the following libraries to load the Maps JavaScript API.
JS API loader
Dynamically load the Maps JavaScript API with Promises.
npm i @googlemaps/js-api-loader
Using TypeScript
TypeScript users can get started with the following packages. Check out the using TypeScript guide for additional information.
TypeScript types
TypeScript types for Maps JavaScript API
npm i -D @types/google.maps
TypeScript guards
TypeScript guards to narrow union types.
npm i -D @googlemaps/typescript-guards
Using React
React users can get started with the following packages.
React Google Maps Library
Components and hooks to integrate the Maps JavaScript API into React applications.
npm i -D @vis.gl/react-google-maps
React wrapper
A wrapper component to declaratively load the Maps JavaScript API.
npm i @googlemaps/react-wrapper
Extending markers and overlays
The following libraries extend classes such as Marker and OverlayView.
Marker clusterer
Creates and manages per-zoom-level clusters for large amounts of markers.
npm i @googlemaps/markerclusterer
Marker manager
Adds and removes markers based upon map viewport changes.
npm i @googlemaps/markermanager
Web map service (WMS)
Add Open Geospatial Consortium (OGC) layers such as a Web Map Service (WMS) to a map.
npm i @googlemaps/ogc
Marker labels
Add custom HTML labels to markers.
npm i @googlemaps/markerwithlabel
Three.js overlays
Use WebGL and ThreeJS for high performance visualizations.
npm i @googlemaps/three
Deck.gl overlays
Use Deck.gl as a custom Google Maps overlay.
npm i @deck.gl/google-maps
Testing and linting
Use these libraries to ensure best practices and make testing easier for the Maps JavaScript API.
ESLint plugin
Use custom ESLint rules to lint your code.
npm i -D eslint-plugin-googlemaps
Jest mocks
Mocks to use with the Jest testing library.
npm i -D @googlemaps/jest-mocks
Node.js Libraries
Node.js client library
Node.js client library for making calls from cloud functions or serverside code.
npm i @googlemaps/google-maps-services-js
Polyline encoding
Encode and decode polylines in Node.js.
npm i @googlemaps/polyline-codec
URL signing
Sign URLs in Node.js for additional security.
npm i @googlemaps/url-signature