Map

An interactive OpenStreetMap/Leaflet component that supports panning, zooming, markers, and programmatic control via button scripts. It is free to use and does not require an API key.

Use Cases

• Contact page location display
• Store/office locator with search
• Event venue location
• Property/real estate listings with markers
• Delivery tracking destination
• Interactive location picker

Properties

name

Name for script access. When set, scripts can control this map via context.maps.{name}. Type: string.

address

Street address (geocoded via Nominatim). Takes precedence over lat/lng if both provided. Type: string.

latitude

Latitude coordinate (use with longitude). Type: number.

longitude

Longitude coordinate (use with latitude). Type: number.

zoom

Zoom level 1-20 (1=world, 10=city, 15=street, 20=building). Type: number. Default: 12.

height

Map height. Type: string. Options: 200px, 300px, 400px, 500px, 600px. Default: 400px.

mapType

Map tile style. Type: string. Options: roadmap, satellite, hybrid, terrain. Default: roadmap.

gestureHandling

When true, requires Ctrl+scroll to zoom (prevents accidental zoom while scrolling page). When false, scroll wheel zooms directly. Type: boolean. Default: true.

Best Practices

• Use address for human-readable locations (auto-geocoded via Nominatim)
• Use lat/lng for precise coordinates when address lookup might be ambiguous
• Set appropriate zoom level (10-12 for cities, 15-17 for buildings)
• Use ‘roadmap’ for most cases, ‘satellite’ for outdoor/real estate
• Set ‘name’ prop to enable script control (e.g., name: ‘storeMap’)
• Script API: context.maps.{name}.panTo(lat, lng), .addMarker(lat, lng, title, popup), .clearMarkers(), .fitBounds()
• panToAddress(address) is async — use await in button scripts