TypeScript MIT

react-google-maps-api

React Google Maps API

J

JustFly1984

Dernière activité 7 mai 2026
JustFly1984/react-google-maps-api

2 k

étoiles

448

forks

193

issues ouvertes

gatsbygoogle-mapgoogle-map-reactgoogle-mapsgoogle-maps-apigoogle-maps-javascriptgoogle-maps-javascript-apigoogle-maps-reactreactreact-google-mapreact-google-map-examplereact-google-mapsreact-google-maps-api

Ce README est souvent en anglais.

logo

@react-google-maps/api

React components and hooks for Google Maps JavaScript API

npm package npm downloads npm bundle size TypeScript React 19

Documentation · NPM Package · Examples

Commercial License

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

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

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

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

# bun
bun add @react-google-maps/api
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:

Community

Contributing

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

Development Setup

# 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

Support

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

Projets similaires

React components and hooks for the Google Maps JavaScript API

TypeScriptgoogle-mapsgoogle-maps-apireact
Vvisgl
1,9 k étoiles195

Google map library for react that allows rendering components as markers

JavaScriptcomponentgooglemap
GGoogleMapReact
6,5 k étoiles847

React Native Mapview component for iOS + Android

TypeScriptgoogle-mapsmapsreact-native
Rreact-native-maps
16 k étoiles5 k