google-maps-platform

Implements Google Maps Platform features with grounded documentation and compliance checks.

1|Updated Sep 15, 2026
One-click install
npx skills add https://github.com/amoai-tech/mdeai --skill google-maps-platform-amoai-tech
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: google-maps-platform
Source: https://github.com/amoai-tech/mdeai/tree/main/.claude/skills/maps/references/vendor/google-maps-platform
Command: npx skills add https://github.com/amoai-tech/mdeai --skill google-maps-platform-amoai-tech

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Writing Google Maps Platform code from memory leads to deprecated API usage, silent runtime failures, and Terms of Service violations. This Skill enforces a grounding workflow that fetches current documentation and sub-skills before generating any map, places, routing, or geocoding code. ## Core Features & Use Cases - Grounded Code Generation: Fetches the Google Maps Platform Skills Index and per-product sub-skills before writing code, with MCP or REST fallback to the Code Assist service. - Deprecation Guardrails: Blocks legacy APIs like DirectionsService, PlacesService, and google.maps.Marker, routing to modern replacements such as Route.computeRoutes and AdvancedMarkerElement. - Compliance & Cost Governance: Enforces ToS review, attribution IDs, API key restriction guidance, and a mandatory response appendix covering costs and licensing. - Use Case: When adding a store locator with Places autocomplete to a React app, the Skill loads the relevant sub-skills, mandates @vis.gl/react-google-maps, and produces code that avoids the CORS trap and mapId pitfalls. ## Quick Start Ask the agent to build a store locator with Places autocomplete on an interactive map and let it fetch the required Google Maps Platform sub-skills first.

Frequently Asked Questions about google-maps-platform

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add Google Maps to a React app correctly?

Use @vis.gl/react-google-maps as the mandated React library, wrap your app in APIProvider, and give the Map component explicit CSS height. Avoid google-map-react and @react-google-maps/api, which are prohibited by the framework policy.

What replaces the deprecated DirectionsService and PlacesService?

DirectionsService is replaced by Route.computeRoutes via the routes library, and PlacesService is replaced by the Place class with searchByText, searchNearby, or PlaceAutocompleteElement. Legacy services are disabled on newer GCP projects and throw errors at runtime.

Can I prototype Google Maps features without a billing account?

Yes, the Maps Demo Key supports prototyping without a Cloud project or billing setup. It covers Maps JavaScript, Places, Routes, Geocoding, Weather, and Places UI Kit, but has daily limits and is not for production use.

Why does my Google Map render as a blank or gray box?

Blank maps usually come from missing CSS height on the Map container, a missing mapId when using AdvancedMarkerElement, or calling disabled legacy APIs like DirectionsService. Headless environments also lack WebGL, breaking 3D and deck.gl rendering.

Why do client-side fetch calls to Google Maps REST APIs fail?

Routes, Places API (New), Address Validation, and Geocoding REST endpoints lack permissive CORS headers, so browser fetch calls are blocked. Use official SDK wrappers like importLibrary or route requests through a server-side proxy.