@gmaps-kit/react

React components and hooks for Google Maps with gmaps-kit - useGeocoding, useDirections, usePlaces, useMarkers, useStreetView and more.


🚀 Live Demo

Try it out: https://demo-app-rouge-five.vercel.app/

See all React components and hooks in action!

Features

- ⚛️ React Hooks - Easy-to-use hooks for Google Maps functionality
- 🗺️ Map Component - Ready-to-use Map component
- 📍 Geocoding Hooks - Convert addresses to coordinates
- 🧭 Directions Hooks - Get and display directions
- 🏢 Places Hooks - Search and manage places
- 📌 Marker Components - Add markers with React components
- 🛣️ Street View Hooks - Integrate Street View
- 🔍 Autocomplete Hooks - Add place autocomplete
- 🎯 TypeScript - Full TypeScript support
- ⚡ Lightweight - Optimized bundle size (~13KB)
- 🔄 React 16.8+ - Compatible with modern React

Installation

``bash
npm install @gmaps-kit/react @gmaps-kit/core
`

Quick Start

$3

`tsx
import { useGoogleMaps } from '@gmaps-kit/react';

function App() {
const { isLoaded, load } = useGoogleMaps({
apiKey: 'YOUR_API_KEY',
libraries: ['places', 'geometry'],
});

if (!isLoaded) {
return

return ;
}
`

$3

`tsx
import { Map } from '@gmaps-kit/react';

function MyMap() {
return (
id="my-map"
center={{ lat: 40.7128, lng: -74.006 }}
zoom={10}
style={{ height: '400px', width: '100%' }}
/>
);
}
`

$3

`tsx
import { Map, Marker } from '@gmaps-kit/react';
import { useMap } from '@gmaps-kit/react';

function MapWithMarkers() {
const { mapInstance } = useMap('my-map', {
center: { lat: 40.7128, lng: -74.006 },
zoom: 10,
});

return (

);
}
`

Hooks

$3

Initialize Google Maps API:

`tsx
import { useGoogleMaps } from '@gmaps-kit/react';

function App() {
const { isLoaded, isLoading, error, load } = useGoogleMaps({
apiKey: 'YOUR_API_KEY',
libraries: ['places'],
onLoad: () => console.log('Maps loaded!'),
onError: (error) => console.error('Maps error:', error),
});

if (isLoading) return

return ;
}
`

$3

Convert addresses to coordinates:

`tsx
import { useGeocoding } from '@gmaps-kit/react';

function GeocodingExample() {
const { geocode, reverseGeocode, results, loading, error } = useGeocoding();

const handleGeocode = () => {
geocode('New York City');
};

const handleReverseGeocode = () => {
reverseGeocode({ lat: 40.7128, lng: -74.006 });
};

return (


{JSON.stringify(results, null, 2)}

`tsx
import { useDirections } from '@gmaps-kit/react';

function DirectionsExample() {
const { getDirections, renderDirections, clearDirections, result, loading } =
useDirections();

const handleGetDirections = () => {
getDirections({
origin: 'New York, NY',
destination: 'Boston, MA',
travelMode: 'DRIVING',
});
};

return (


`tsx
import { usePlaces } from '@gmaps-kit/react';

function PlacesExample() {
const {
textSearch,
nearbySearch,
placeDetails,
autocomplete,
results,
loading,
} = usePlaces();

const handleSearch = () => {
textSearch({
query: 'restaurants in New York',
location: { lat: 40.7128, lng: -74.006 },
radius: 1000,
});
};

return (


`tsx
import { usePlacesNew } from '@gmaps-kit/react';

function PlacesNewExample() {
const {
textSearch,
nearbySearch,
placeDetails,
autocomplete,
getPhoto,
buildPhotoUrl,
isLoading,
error,
} = usePlacesNew({
apiKey: 'YOUR_API_KEY',
// No baseUrl needed - direct API calls with better CORS support!
});

const handleTextSearch = async () => {
try {
const results = await textSearch({
textQuery: 'restaurants in New York',
locationBias: {
circle: {
center: { latitude: 40.7128, longitude: -74.006 },
radius: 1000,
},
},
maxResultCount: 10,
minRating: 4.0,
});
console.log('Text search results:', results);
} catch (error) {
console.error('Search failed:', error);
}
};

const handleNearbySearch = async () => {
try {
const results = await nearbySearch({
includedTypes: ['restaurant', 'cafe'],
locationRestriction: {
circle: {
center: { latitude: 40.7128, longitude: -74.006 },
radius: 1000,
},
},
maxResultCount: 10,
minRating: 4.0,
});
console.log('Nearby search results:', results);
} catch (error) {
console.error('Search failed:', error);
}
};

const handlePlaceDetails = async () => {
try {
const details = await placeDetails({
placeId: 'ChIJN1t_tDeuEmsRUsoyG83frY4',
});
console.log('Place details:', details);
} catch (error) {
console.error('Details failed:', error);
}
};

const handleAutocomplete = async () => {
try {
const results = await autocomplete({
input: 'restaurants in',
locationBias: {
circle: {
center: { latitude: 40.7128, longitude: -74.006 },
radius: 1000,
},
},
});
console.log('Autocomplete results:', results);
} catch (error) {
console.error('Autocomplete failed:', error);
}
};

return (


`tsx
import { useMarkers } from '@gmaps-kit/react';

function MarkersExample({ mapInstance }) {
const { addMarker, removeMarker, updateMarker, markers, clearMarkers } =
useMarkers();

const handleAddMarker = () => {
addMarker({
position: { lat: 40.7128, lng: -74.006 },
title: 'New Marker',
});
};

return (


`tsx
import { useStreetView } from '@gmaps-kit/react';

function StreetViewExample() {
const { createPanorama, setPosition, setPov, setVisible, isVisible } =
useStreetView();

const handleShowStreetView = () => {
createPanorama('street-view-container', {
position: { lat: 40.7128, lng: -74.006 },
pov: { heading: 0, pitch: 0 },
});
setVisible(true);
};

return (