Maps Element
The Maps element embeds Google Maps in your popup. Perfect for contact pages, store locators, and location-based content.
Overview
| Property | Value |
|---|---|
| Element Type | maps |
| Can Contain Children | No |
| Provider | Google Maps |
Use Cases
- Business location display
- Contact popup with address
- Store locator
- Event venue maps
- Service area display
- Direction links
Content Settings
Location
Set the map location:
Address:
123 Main Street, New York, NY 10001
Coordinates:
Latitude: 40.7128
Longitude: -74.0060
Zoom Level
Control map zoom:
| Level | View |
|---|---|
| 1-5 | Country/region |
| 6-10 | City |
| 11-14 | Neighborhood |
| 15-17 | Street |
| 18-20 | Building |
Recommended: 14-16 for business locations.
Map Type
Select the map style:
| Type | Description |
|---|---|
| Roadmap | Standard street map |
| Satellite | Satellite imagery |
| Hybrid | Satellite + labels |
| Terrain | Topographic map |
Display Settings
Width
Map width:
| Option | Description |
|---|---|
| Full | 100% container width |
| Fixed | Specific pixel width |
| Percentage | Percentage of container |
Height
Map height:
Height: 300px
Typical heights: 200-400px
Aspect Ratio
Alternative to fixed height:
| Ratio | Use Case |
|---|---|
| 16:9 | Wide view |
| 4:3 | Traditional |
| 1:1 | Square |
Style Settings
Border Radius
Round map corners:
Border Radius: 12px
Border
Add border around map:
Border: 1px solid #e2e8f0
Shadow
Add depth:
Shadow: 0 4px 12px rgba(0,0,0,0.1)
Map Controls
Show Controls
Display map interaction controls:
| Control | Description |
|---|---|
| Zoom | + / - buttons |
| Map Type | Roadmap/satellite toggle |
| Street View | Pegman control |
| Fullscreen | Expand button |
Allow Interaction
Enable/disable map interaction:
| Option | Description |
|---|---|
| Enabled | Users can pan/zoom |
| Disabled | Static display only |
On mobile, interactive maps can interfere with scrolling. Consider disabling interaction for small popups.
Marker Settings
Show Marker
Display a pin at the location:
| Option | Description |
|---|---|
| Enabled | Show location pin |
| Disabled | No marker |
Custom Marker
Use a custom marker image (advanced).
Advanced Settings
HTML ID
Custom ID for targeting.
CSS Classes
Add custom classes.
Lazy Loading
Load map when visible:
| Option | Benefit |
|---|---|
| Enabled | Better performance |
| Disabled | Immediate load |
Examples
Business Location
Settings:
- Address: "123 Main St, City, State"
- Zoom: 15
- Type: Roadmap
- Width: 100%
- Height: 250px
- Border Radius: 8px
- Controls: Zoom only
- Marker: Enabled
Contact Popup Map
Settings:
- Address: Business address
- Zoom: 14
- Type: Roadmap
- Width: 100%
- Height: 200px
- Interaction: Disabled
- Border Radius: 0 (edge to edge)
Event Venue
Settings:
- Coordinates: Exact lat/lng
- Zoom: 17
- Type: Hybrid
- Width: 100%
- Height: 300px
- Controls: All
- Shadow: Enabled
Store Locator Preview
Settings:
- Address: Store address
- Zoom: 12
- Type: Roadmap
- Width: 100%
- Height: 200px
- Border Radius: 12px
- Marker: Custom icon
Layout Integration
With Address Text
Typical layout:
Section
├── Column (Map)
│ └── Maps Element
└── Column (Info)
├── Heading: "Visit Us"
├── Text: Address
└── Button: "Get Directions"
Full-Width Map Header
Maps Element (no radius, full width)
Content Section
├── Heading
├── Text
└── Button
Performance Tips
- Lazy load — Maps are heavy, load when visible
- Fixed height — Prevents layout shifts
- Limit interactions — Static maps load faster
- Consider screenshots — For simple display, an image may be better
Google Maps API
XBuilder uses the Google Maps Embed API, which:
- Requires no API key for basic embeds
- Has usage limits (check Google's terms)
- Supports limited customization
For advanced customization, use the Iframe element with a custom Google Maps implementation.
Accessibility
- Provide text address alongside map
- Don't rely solely on map for location info
- Include "Get Directions" link
- Ensure adequate color contrast for any overlays
Troubleshooting
Map not loading:
- Check address format
- Verify coordinates are correct
- Check internet connection
- Try different map type
Map cut off:
- Adjust height setting
- Check container overflow
- Verify aspect ratio