skills.rest
waiyanphyo999
waiyanphyo999COMMUNITY
Explore all skills by this author →
GitHub

webdev-maps-integration

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

1|Updated Jul 17, 2026
Search Tags:#react#trpc#fullstack#geocoding#directions#google maps#maps integration
One-click install
npx skills add https://github.com/waiyanphyo999/telegram-bot-deploy --skill webdev-maps-integration-waiyanphyo999
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: webdev-maps-integration
Source: https://github.com/waiyanphyo999/telegram-bot-deploy/tree/main/skills/webdev-maps-integration
Command: npx skills add https://github.com/waiyanphyo999/telegram-bot-deploy --skill webdev-maps-integration-waiyanphyo999

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Developers building Manus webdev fullstack (web-db-user) projects often struggle with Google Maps setup, API key management, and choosing between frontend and backend integration. This Skill removes that friction by providing automatic authentication through the Manus proxy and clear guidance on implementation patterns. ## Core Features & Use Cases - Frontend Map Integration: Import MapView from client/src/components/Map.tsx and use any Google Maps JavaScript API feature (geocoding, directions, places, drawing, heatmaps, Street View) in the onMapReady callback. - Backend Map Operations: Create tRPC procedures using makeRequest from server/_core/map.ts for persisting locations, bulk geocoding, caching, and scheduled jobs. - Use Case: Build a delivery tracking app where users view routes and places on an interactive map in the browser, while the backend saves 1000+ geocoded addresses to the database. ## Quick Start Add an interactive Google Map with geocoding and directions to my Manus fullstack web project using the built-in Map component.

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 web project?▼

Import the MapView component from client/src/components/Map.tsx and initialize any Google Maps JavaScript API service in 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 backend Google Maps API instead of frontend?▼

Use the backend tRPC approach with makeRequest from server/_core/map.ts when persisting routes or locations to a database, geocoding 1000+ addresses in bulk, or handling server-side needs like caching and scheduled jobs.

Does the Manus proxy support all Google Maps features?▼

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

Can I use external map libraries like Leaflet in Manus projects?▼

No, external map libraries should not be used. The built-in Map component and Manus proxy handle all mapping needs, so third-party libraries are unnecessary and discouraged.

Related Skills

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

webdev-readme-fullstack

Guides fullstack web development on the React, tRPC, Drizzle, and Manus OAuth template.

Official
Advanced
ClawLink-HQClawLink-HQ
117

google-maps-places

Search locations, geocode addresses, and calculate routes via Google Maps API.

Official
Advanced
mhbdevmhbdev

better-auth-best-practices

Guide Better Auth TypeScript authentication framework integration with configuration and security practices.

Community
Intermediate
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