Skip to main content
React Google Maps API provides a comprehensive set of React components that wrap Google Maps JavaScript API functionality. All components are built with React hooks and TypeScript for excellent developer experience.

​
Core Components

These are the essential components you’ll use in almost every map implementation.

GoogleMap

The main map container component that renders the Google Map instance

LoadScript

Load the Google Maps JavaScript API with proper configuration

​
Markers & Overlays

Components for adding interactive markers and visual elements to your map.

Marker

Add markers to indicate points of interest on the map

InfoWindow

Display information windows attached to markers or positions

OverlayView

Create custom DOM-based overlays on the map

GroundOverlay

Display images overlaid on specific map coordinates

​
Drawing Components

Components for drawing shapes and paths on the map.

Polyline

Draw lines connecting multiple points on the map

Polygon

Draw closed polygon shapes on the map

Circle

Draw circular areas on the map

Rectangle

Draw rectangular areas on the map

DrawingManager

Enable interactive drawing tools for users

​
Data & Visualization

Components for displaying data layers and visualizations.

HeatmapLayer

Display heatmap visualizations of data density

Data

Display GeoJSON data on the map

KmlLayer

Display KML/KMZ files on the map

​
Map Layers

Pre-built layers for common map data.

TrafficLayer

Display real-time traffic information

TransitLayer

Show public transit routes and stations

BicyclingLayer

Display bicycle routes and paths

​
Services

Components that provide Google Maps services functionality.

DirectionsService

Calculate directions between locations

DirectionsRenderer

Display calculated directions on the map

DistanceMatrixService

Calculate travel distances and times between multiple points

Autocomplete

Add place autocomplete to input fields

StandaloneSearchBox

Standalone search box for places

​
Street View

Components for integrating Street View functionality.

StreetViewPanorama

Display Google Street View panoramas

StreetViewService

Access Street View data programmatically

​
Advanced Features

Advanced components for complex use cases.

MarkerClusterer

Group nearby markers into clusters for better performance

InfoBox

Customizable information boxes with advanced styling

​
Component Architecture

All components in this library follow consistent patterns:

​
Context-Based

Components use React Context to access the map instance. Child components must be rendered within a <GoogleMap> component: 
<GoogleMap>
  <Marker position={{ lat: 37.7749, lng: -122.4194 }} />
  <InfoWindow position={{ lat: 37.7749, lng: -122.4194 }}>
    <div>San Francisco</div>
  </InfoWindow>
</GoogleMap>

​
Lifecycle Callbacks

Most components provide onLoad and onUnmount callbacks to access the underlying Google Maps object: 
<Marker
  position={{ lat: 37.7749, lng: -122.4194 }}
  onLoad={(marker) => {
    console.log('Marker loaded:', marker)
  }}
  onUnmount={(marker) => {
    console.log('Marker unmounted:', marker)
  }}
/>

​
Event Handlers

Components expose Google Maps events as React props with the on prefix: 
<GoogleMap
  onClick={(e) => console.log('Clicked at:', e.latLng)}
  onDrag={() => console.log('Map is being dragged')}
  onZoomChanged={() => console.log('Zoom level changed')}
>

​
TypeScript Support

All components are fully typed with TypeScript. Import types from the package: 
import { GoogleMap, Marker } from '@react-google-maps/api'
import type { GoogleMapProps, MarkerProps } from '@react-google-maps/api'

​
Getting Started

To start using these components:
  1. Load the Google Maps API using LoadScript or LoadScriptNext
  2. Render a map using the GoogleMap component
  3. Add child components for markers, overlays, and other features

Quick Start Guide

Learn how to set up your first map

Build docs developers (and LLMs) love

Get started for freeTalk to us