<div align="center">

@react-google-maps/api

React components and hooks for Google Maps JavaScript API

Documentation · NPM Package · Examples

</div>

Commercial License

Version 3.x and later of @react-google-maps/api is commercial software. For licensing information and pricing, visit our documentation:

• Documentation & Licensing - Complete API reference and commercial licensing details

For open-source use, please see our GitHub repository for community-supported versions.

Overview

@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.

Features

• Hooks-based API - useJsApiLoader, useGoogleMap, and more
• Full TypeScript support - Complete type definitions included
• React 19 compatible - Works with the latest React features
• Tree-shakeable - Only bundle what you use (~12kb gzipped)
• SSR friendly - Works with Next.js, Remix, and other frameworks

Quick Start

bashCopy
# npm
npm install @react-google-maps/api

# yarn
yarn add @react-google-maps/api

# bun
bun add @react-google-maps/api

tsxCopy
import { GoogleMap, useJsApiLoader } from '@react-google-maps/api';
import { useMemo, useCallback, useState, type JSX } from 'react';

function Map(): JSX.Element {
  const { isLoaded } = useJsApiLoader({
    googleMapsApiKey: 'YOUR_API_KEY',
  });

  const center = useMemo(() => ({ lat: 40.7128, lng: -74.006 }), []);
  const containerStyle = useMemo(() => ({ width: '100%', height: '400px' }), []);

  if (!isLoaded) return <div>Loading...</div>;

  return (
    <GoogleMap
      mapContainerStyle={containerStyle}
      center={center}
      zoom={12}
    />
  );
}

Documentation

For full API documentation and examples, see:

• Package README - Detailed API docs and examples
• Live Documentation - Interactive component explorer

Community

• Slack Channel - Get help and discuss
• GitHub Issues - Report bugs and request features

Contributing

We welcome contributions! See our contributing guide to get started.

Development Setup

bashCopy
# Clone the repository
git clone https://github.com/JustFly1984/react-google-maps-api.git
cd react-google-maps-api

# Install dependencies
bun install

# Set up workspace
bun run bootstrap

Requirements

• Node.js 18+
• Bun
• Google Maps API Key from Google Cloud Console

Support

If you find this library useful, consider sponsoring the project.