skills.rest
Military-Veteran-Team-LPT-Realty
Military-Veteran-Team-LPT-RealtyOFFICIAL
Explore all skills by this author →
GitHub

webdev-maps-integration

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

Updated Sep 16, 2026
Search Tags:#trpc#fullstack#webdev#geocoding#directions#google maps#maps integration
One-click install
npx skills add https://github.com/Military-Veteran-Team-LPT-Realty/mvt-manus-public-skills --skill webdev-maps-integration-military-veteran-team-lpt-realty
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: webdev-maps-integration
Source: https://github.com/Military-Veteran-Team-LPT-Realty/mvt-manus-public-skills/tree/main/skills/webdev-maps-integration
Command: npx skills add https://github.com/Military-Veteran-Team-LPT-Realty/mvt-manus-public-skills --skill webdev-maps-integration-military-veteran-team-lpt-realty

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 approaches. This Skill removes that friction by providing clear guidance on using the Manus proxy, which handles authentication automatically. ## Core Features & Use Cases - Frontend Map Integration: Import MapView from client/src/components/Map.tsx and initialize any Google Maps JavaScript API service (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 routes, bulk geocoding, caching, and scheduled jobs. - Use Case: A user building a delivery tracking app can display live routes on an interactive map in the browser, then save computed directions to the database through a backend tRPC procedure without ever requesting an API key. ## Quick Start Add an interactive Google Map with geocoding and directions to my Manus webdev project using the built-in MapView 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 webdev project?▼

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

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

No API key is required. The Manus proxy provides full access to all Google Maps features, including Places, geocoding, directions, drawing, and Street View, with authentication handled automatically.

When should I use backend tRPC procedures instead of the frontend Map component?▼

Use backend tRPC procedures with makeRequest from server/_core/map.ts when persisting routes or locations to a database, running bulk operations on 1000+ addresses, or handling server-side caching and scheduled jobs. Otherwise, prefer the frontend SDK.

Does the Manus proxy support all Google Maps JavaScript API features?▼

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

Can I use external map libraries like Leaflet in a Manus webdev project?▼

No, external map libraries should not be used. The Skill directs all map functionality through the built-in MapView component and the Manus proxy, which already covers the complete Google Maps feature set.

Related Skills

Explore More Software Engineering Skills→
bwbioinfobwbioinfo
4

dioxus-fullstack-dev

Build fullstack Dioxus applications with SSR, server functions, and API integration.

Community
Advanced
Rawgrowth-ConsultingRawgrowth-Consulting

maps

Geocode queries, reverse geocode coordinates, and compute routes with OpenStreetMap data.

Official
Advanced
ArMaTeCArMaTeC

fullstack-guardian

Implements security-focused full-stack features spanning frontend, backend, and database layers.

Community
Advanced
mealpacmealpac
1

autonomous-github-sync

Automate GitHub commits and pushes via Google Drive intermediary.

Community
Advanced