React Google Maps
This skill covers the official vis.gl React wrapper for Google Maps, enabling you to embed interactive maps with markers, info windows, and custom controls in React and Next.js projects. It includes hooks for accessing the Maps API, handling draggable markers, and loading optional libraries like Places and Geocoding. Reference guides detail component APIs, common patterns, and geometry implementations.
React Google Maps provides the official @vis.gl/react-google-maps library for embedding interactive Google Maps in React and Next.js apps.
AI-generated summary based on this skill's SKILL.md
Install
horuz-ai/claude-plugins/react-google-maps · repository language: Python
git clone https://github.com/horuz-ai/claude-plugins
cp -r claude-plugins ~/.claude/skills/react-google-mapsgenerated, unverified - the skill's exact subdirectory could not be determined; check the repository on GitHub
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do you add Google Maps to a React app?
React Google Maps is the official vis.gl wrapper that lets you embed interactive maps directly into React and Next.js projects. You install it via npm, wrap your app with an ApiProvider component using your Google Maps API key, and then use the Map component along with markers, info windows, and custom controls. The library provides React hooks to access the underlying Maps API and handle common tasks like dragging markers or loading optional services such as Places and Geocoding.
What React component for Google Maps should I use?
React Google Maps provides purpose-built components for map integration. The Map component renders the interactive map canvas, while AdvancedMarker displays location pins with customizable content. InfoWindow shows popup details when users interact with markers. The library also includes hooks like useMap and useAdvancedMarkerRef for programmatic control. These components work seamlessly with React's state and lifecycle, making it straightforward to build location-aware features in your application.
How can React Google Maps enable geolocation features?
React Google Maps supports geolocation by combining browser Geolocation API calls with the library's marker and map positioning capabilities. You can fetch the user's coordinates, then use the Map component's center prop to focus on that location and place an AdvancedMarker there. The library's geometry utilities help calculate distances and bounds, while optional Geocoding integration converts coordinates to addresses. This enables location-based search, nearby place discovery, and personalized map views.
What does React Google Maps include for map visualization?
React Google Maps delivers comprehensive map visualization tools including interactive map rendering, draggable and clickable markers, customizable info windows for location details, and support for map styles and themes. You can load optional libraries like Places for location search, Geocoding for address conversion, and Routes for directions. The component API exposes geometry methods for distance calculations and polygon/polyline drawing, enabling rich visual experiences from simple location displays to complex multi-marker dashboards.
How do you set up React Google Maps in a project?
React Google Maps setup begins with obtaining a Google Maps API key from Google Cloud Console. Install the package via npm, then wrap your application with the ApiProvider component, passing your API key as a prop. Inside, use the Map component to define the map container and initial settings like center coordinates and zoom level. Add AdvancedMarker components for locations and InfoWindow for details. The library handles API initialization automatically, and you can enable optional services like Geocoding or Places during setup.
What is the React Google Maps npm package and how does it work?
The React Google Maps npm package is the official vis.gl library that wraps Google's Maps JavaScript API for React developers. It exports components (Map, AdvancedMarker, InfoWindow) and hooks (useMap, useAdvancedMarkerRef) that integrate seamlessly with React's component model. The package handles API loading, manages map state, and provides TypeScript support. You configure it once with your API key via ApiProvider, then compose map features declaratively using React JSX, eliminating manual DOM manipulation and API boilerplate.