react-google-maps

Integrate Google Maps by wrapping your app with APIProvider (with your API key), then render a Map component with AdvancedMarker and InfoWindow for interactive mapping. This Skill provides hooks like useMap and useAdvancedMarkerRef for robust composition across client and server-rendered React/Next.js setups.

Yes. This Skill supports draggable AdvancedMarkers with real-time drag synchronization and multi-shape coordination. Use useAdvancedMarkerRef to track marker state and sync positions between markers and shapes as users interact with the map.

Implement Places autocomplete using AutocompleteService with a custom UI (standard Autocomplete was deprecated in March 2025). This Skill provides geocoding utilities and hooks to integrate address lookups and coordinate conversion within your mapping workflow.

AdvancedMarker requires a mapId to be set on your Map component. All map components must be wrapped with APIProvider at the app root. This Skill exports TypeScript types and hooks to ensure proper setup and composition.

Yes. This Skill accommodates both client and server-rendered setups in modern React ecosystems, including Next.js. Use APIProvider at the app root and leverage hooks like useMap and useApiIsLoaded for proper initialization across rendering modes.

Circle and Polygon are not exported directly; instead, use MapControl and related utilities to handle geometry and drawing. This design accommodates the advanced patterns this Skill provides for real-time shape coordination and multi-component synchronization.