Skip to main content
@react-google-maps/api provides declarative React components for the Google Maps JavaScript API. Build interactive maps with markers, overlays, directions, and more using familiar React patterns.

​
What is @react-google-maps/api?

This library offers a modern, hooks-based approach to integrating Google Maps into your React applications. Instead of working directly with the imperative Google Maps JavaScript API, you can use React components and hooks that feel natural in a React codebase.

Hooks-First Design

Built around React hooks like useJsApiLoader and useGoogleMap for seamless integration with modern React patterns

Full TypeScript Support

Complete type definitions included out of the box, providing excellent IDE autocomplete and type safety

Tree-Shakeable

Only bundle what you use. The library is optimized for tree-shaking, resulting in ~12kb gzipped for basic usage

React 19 Compatible

Works with React 16.8+ through React 19, including full support for the latest React features

​
Key Features

​
Declarative Components

Instead of imperatively creating map objects, use React components: 
<GoogleMap center={{ lat: 40.7128, lng: -74.006 }} zoom={12}>
  <Marker position={{ lat: 40.7128, lng: -74.006 }} />
  <Circle center={{ lat: 40.7128, lng: -74.006 }} radius={1000} />
</GoogleMap>

​
Context-Based Map Access

Access the map instance from any child component using useGoogleMap(): 
import { useGoogleMap } from '@react-google-maps/api';

function MapControls() {
  const map = useGoogleMap();
  
  const panTo = () => {
    map?.panTo({ lat: 40.7128, lng: -74.006 });
  };
  
  return <button onClick={panTo}>Pan to NYC</button>;
}

​
Comprehensive Component Library

The library includes components for:
  • Drawing: Marker, InfoWindow, Polyline, Polygon, Rectangle, Circle
  • Layers: TrafficLayer, BicyclingLayer, TransitLayer, HeatmapLayer, KmlLayer
  • Services: DirectionsService, DirectionsRenderer, DistanceMatrixService
  • Places: Autocomplete, StandaloneSearchBox
  • Overlays: OverlayView, GroundOverlay, StreetViewPanorama
  • Addons: MarkerClusterer, InfoBox, GoogleMarkerClusterer

​
Requirements

React 16.8 or higher is required (hooks support). React 19 is fully supported.
  • React: 16.8+ (hooks support required)
  • Google Maps API Key: Obtain from Google Cloud Console
  • Node.js: 18+ recommended for development

​
Commercial License

Version 3.x and later of @react-google-maps/api is commercial software. For licensing information and pricing, visit the documentation website.
For open-source use, community-supported versions are available in the GitHub repository.

​
Getting Your API Key

Before using this library, you’ll need a Google Maps API key:
1

Visit Google Cloud Console

Go to Google Cloud Console
2

Create a project

Create a new project or select an existing one
3

Enable APIs

Enable the following APIs:
  • Maps JavaScript API (required)
  • Places API (if using autocomplete/search)
  • Directions API (if using directions)
4

Create credentials

Create an API key in the Credentials section
5

Secure your key

Restrict your API key to your domain/app for security

​
Browser Support

The library supports all modern browsers that React supports:
  • Chrome (last 2 versions)
  • Firefox (last 2 versions)
  • Safari (last 2 versions)
  • Edge (last 2 versions)

​
SSR Friendly

The library works with server-side rendering frameworks:
  • Next.js
  • Remix
  • Gatsby
  • Any other React SSR framework
The library checks for browser environment before loading the Google Maps API, making it safe to use in SSR contexts.

​
Community & Support

Get help and connect with other developers:

​
Next Steps

Ready to get started? Follow our installation guide to add the library to your project.

Installation

Learn how to install and configure @react-google-maps/api in your project

Build docs developers (and LLMs) love

Get started for freeTalk to us