How are complex shapes like Polygons handled?

Since the library doesn't export geometry components directly, this skill provides standardized implementations for Circle, Polygon, and Polyline using the Google Maps JS API.

Does this skill support legacy Google Maps libraries?

This skill focuses on the modern @vis.gl/react-google-maps library, which is the current official recommendation from Google for React developers.

Why do I need a mapId for markers?

A mapId is required for the modern AdvancedMarker component to enable vector-based rendering and advanced styling features via the Google Cloud Console.

Can I implement Places Autocomplete with this skill?

Yes, it provides patterns for using the AutocompleteService with custom UI, following the latest deprecation guidelines for standard autocomplete widgets.

React Google Maps

Name: React Google Maps
Author: horuz-ai

byhoruz-ai

•

デザインツール

Integrates high-performance Google Maps components into React and Next.js applications using the official vis.gl library.

This skill provides specialized implementation patterns for the @vis.gl/react-google-maps library, the modern official wrapper for the Google Maps JavaScript API. It enables developers to efficiently build complex mapping features including Advanced Markers, InfoWindows, and custom UI controls while ensuring proper API loading and library management. It is particularly useful for handling the transition to vector maps, managing map IDs, and implementing custom geometry components like circles and polygons which are not exported by default.

主な機能

01Modern Advanced Marker and Pin customization

02Dynamic InfoWindow management with marker anchoring

03Efficient loading of specific libraries like Places and Geocoding

04Real-time synchronization for draggable markers and geometry

05Custom UI control placement within the map viewport

061 GitHub stars

ユースケース

01Developing real-time asset tracking dashboards

02Creating complex spatial visualizations with custom polygons and polylines

03Building interactive location search with Places Autocomplete

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add horuz-ai/claude-plugins react-google-maps

For use in Claude.ai and ChatGPT

Download Skill