skills.rest
AnderHonorato
AnderHonoratoCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

webdev-maps-integration

Integrates Google Maps features into Manus fullstack web projects via proxy authentication.

Updated Aug 28, 2026
Search Tags:#trpc#fullstack#geocoding#directions#google maps#places api#maps integration
One-click install
npx skills add https://github.com/AnderHonorato/Mem-rias-IA---Infinity --skill webdev-maps-integration-anderhonorato
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: webdev-maps-integration
Source: https://github.com/AnderHonorato/Mem-rias-IA---Infinity/tree/main/Manus/Skills/webdev-maps-integration
Command: npx skills add https://github.com/AnderHonorato/Mem-rias-IA---Infinity --skill webdev-maps-integration-anderhonorato

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Developers building Manus webdev fullstack (web-db-user) projects often struggle with Google Maps API key management and feature limitations. This Skill removes that friction by routing all Google Maps functionality through the Manus proxy, so maps, geocoding, directions, and Places work without requesting API keys from users. ## Core Features & Use Cases - Frontend Map Rendering: Import MapView from client/src/components/Map.tsx and initialize any Google Maps JavaScript API service (drawing, heatmaps, Street View, Places, geometry) in the onMapReady callback. - Backend Map Operations: Create tRPC procedures using makeRequest from server/_core/map.ts for persisting routes, bulk geocoding of 1000+ addresses, caching, and scheduled jobs. - Use Case: Build a delivery tracking app where the frontend displays live routes and Street View, while the backend geocodes thousands of customer addresses and stores them in the database. ## Quick Start Add an interactive Google Map with geocoding to my Manus fullstack project using the MapView component without asking me for any API key.

Frequently Asked Questions about webdev-maps-integration

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

FAQPage Schema
How do I add Google Maps to a Manus fullstack project?▼

Import the MapView component from client/src/components/Map.tsx and initialize any Google Maps JavaScript API service inside the onMapReady callback. Authentication is handled automatically by the Manus proxy, so no API key is needed.

Do I need a Google Maps API key for Manus webdev projects?▼

No. The Manus proxy provides full access to all Google Maps features with automatic authentication. You should never ask users for API keys or use external map libraries.

When should I use the backend Maps API instead of the frontend SDK?▼

Use the backend API when persisting data such as saving routes or locations to a database, performing bulk operations like geocoding 1000+ addresses, or handling server-side needs like caching, scheduled jobs, and hidden business logic.

Does the Manus proxy support advanced Google Maps features like heatmaps and Street View?▼

Yes. The proxy provides full access to all Google Maps features, including advanced drawing, heatmaps, Street View, all layers, and the Places API, with no feature limitations.

How do I geocode addresses on the server in a Manus project?▼

Create tRPC procedures using the makeRequest function from server/_core/map.ts. This backend approach is recommended for bulk geocoding, caching results, and storing locations in the database.

Related Skills

Explore More Software Engineering Skills→
Military-Veteran-Team-LPT-RealtyMilitary-Veteran-Team-LPT-Realty

webdev-maps-integration

Integrates Google Maps features into Manus fullstack web projects via frontend SDK or backend tRPC procedures.

Official
Basic
dpearson2699dpearson2699
981

mapkit-location

Integrate MapKit and CoreLocation for maps, tracking, geocoding, and routing.

Community
Advanced
dkyazzentwatwadkyazzentwatwa
86

geocoder

Convert addresses to coordinates and reverse geocode using Nominatim, Google, and Bing.

Community
Intermediate
maplibremaplibre
131

maplibre-tile-sources

Configure MapLibre GL JS data sources, glyphs, and sprites.

Official
Intermediate