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
Decision gist · record as of 2026-01-28
React Google Maps provides the official @vis.gl/react-google-maps library for embedding interactive Google Maps in React and Next.js apps. 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.
Use it when
- React Google Maps provides purpose-built components for map integration.
- React Google Maps supports geolocation by combining browser Geolocation API calls with the library's marker and map positioning.
Similar skills
Install
horuz-ai/claude-plugins/react-google-maps · repository language: Python
generated, unverified - the skill's exact subdirectory could not be determined; check the repository on GitHub
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
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.
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Integrate Google Maps into a React application”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
UX Map brings interactive mapping to Symfony applications using either Leaflet or Google Maps as your renderer. Define maps in PHP, render them in Twig, and layer on Stimulus controllers for event handling. Supports markers, polygons, polylines, circles, and popup info windows.
Agent Browser gives AI systems the ability to independently navigate websites, extract information, and interact with web elements without human intervention. This skill bridges the gap between AI reasoning and real-world web data, enabling agents to perform research, monitoring, and automated workflows across the internet.
Component Library generates fully-typed React components using shadcn/ui patterns, CVA variants, and Radix UI primitives—eliminating hours of hand-coding. Choose from form inputs, data tables, navigation, feedback overlays, and layout components, all with built-in accessibility, dark mode, and responsive design.
HeroUI v3 is a React component library combining Tailwind CSS v4 and React Aria to deliver accessible, customizable UI elements. Build with compound components like Card.Header and Card.Content, semantic variants, and CSS variable theming in oklch color space—no provider needed.
react-three-fiber bridges React and Three.js, letting you compose 3D scenes declaratively using familiar component patterns. Define complex 3D environments through JSON specifications and React's component model, then render them efficiently in the browser. Perfect for building interactive visualizations, games, and immersive web experiences.
This skill provides 30+ patterns for Laravel, Inertia.js, and React integration, covering page components, form handling with useForm, navigation, shared data, layouts, and file uploads. Use it when building Inertia page components, managing forms with validation, or implementing persistent layouts in full-stack applications.