react-google-maps

Official

Advanced React Google Maps integration.

Authorhoruz-ai
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill provides a comprehensive React integration with the Google Maps JavaScript API via @vis.gl/react-google-maps, offering Map, AdvancedMarker, Pin, InfoWindow, MapControl, and related hooks and patterns for building rich mapping experiences.

Core Features & Use Cases

  • APIProvider wrapper to load the Maps API
  • Map, AdvancedMarker, Pin, InfoWindow, MapControl components
  • Hooks: useMap, useMapsLibrary, useAdvancedMarkerRef, useApiIsLoaded, etc.
  • Advanced patterns: controlled vs. uncontrolled maps, real-time drag synchronization, multi-shape coordination

Quick Start

Wrap your app with APIProvider (including your Google Maps API key), render a Map, and optionally add an AdvancedMarker with an InfoWindow.

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: react-google-maps
Download link: https://github.com/horuz-ai/claude-plugins/archive/main.zip#react-google-maps

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.