Gaode Maps
Generate configurable Gaode (AMap) map components for Framer. Two modes: single location with markers & info windows, or multi-marker with route planning. Features 6 map styles, 3D view, custom markers, geolocation, and search.
Gaode Maps Helper
A visual map component generator for Framer designers. Configure maps through an intuitive interface and generate ready-to-use code
components - no coding required.
Why Gaode Maps?
Gaode (AMap) is China's leading mapping service with superior coverage and accuracy for Chinese locations. Essential for projects targeting
Chinese markets or featuring locations in China.
Core Features
🗺️ Two Modes
- Bind Address - Single location with custom marker and info window
- Bind Street - Multiple markers with route planning
📍 Marker Customization
- 6 preset colors (blue, red, orange, green, purple, cyan)
- 8 emoji icons (📍📌⭐❤️🏠🏪🍽️☕)
- Custom labels
💬 Info Windows
- Title, description, and image
- Clickable link button
- Opens on marker click
🚗 Route Planning
- Driving, walking, and cycling modes
- One-click swap start/end points
- Automatic route calculation
🎨 Map Styles
- Normal, Dark, Light
- Fresh, Macaron, Darkblue
🏗️ 3D View
- Adjustable pitch (0-83°)
- Adjustable rotation (0-360°)
- 3D building visualization
🔍 Interactive Features
- Geolocation button
- Address search box
- Zoom and pan controls
How to Use
1. Get a free API Key from Gaode Open Platform
2. Configure map style and markers in the plugin
3. Click "Copy Component Code"
4. Paste into Framer Code Component
5. Adjust properties in Framer's property panel
## Generated Component Features
- Fully configurable property controls
- Responsive layout support
- Interactive toggle option
- All parameters adjustable in Framer
Note
The plugin interface is in both English and Chinese, as Gaode Maps primarily serves Chinese users. However, the generated map components work perfectly in any Framer project worldwide.
Changelog
🗺️ Multi-Map Support
- You can now insert multiple independent map instances on the same canvas
- Each map has its own location, markers, style, and settings
- Settings configured in the plugin are automatically applied to each new map
🛡️ Stability Improvements
- Fixed component insertion reliability (HTTPS protocol fix)
- Fixed crashes when using Chinese characters or newlines in Info Window content
- Improved string escaping for all user input fields (titles, content, URLs)
🎨 UI Improvements
- Larger, full-width Insert button for better usability
📌 Marker & Info Window
- Custom marker icons (emoji) now correctly appear on inserted maps
- Info Window content with line breaks now renders properly with <br> tags
Details
Jing Jimmy
