Google Maps
Bootstrap 5.3 layouts for embedded maps: hero overlays, cards, list-driven focus, satellite and terrain, multi-marker bounds, and JSON styles that follow the navbar light / dark toggle via the elementer-theme-change event.
Design system + Maps API
Use .card and the grid for chrome; keep a fixed min-height on map containers so tiles layout correctly. Styled roadmaps use the same palette family as the pack; hybrid and satellite modes ignore JSON styling. Add your API key for production.
Hero — floating contact card
Full-width rounded frame with a theme-aware roadmap, cooperative gestures, and a Bootstrap card anchored over the map.
Classic pack style
Original Elementer JSON styling with concentric circle markers and HTML info windows.
Soft roadmap · follows theme
Minimal POIs; switches between calm light tiles and a midnight blue style in dark mode.
Grayscale + accent marker
Desaturated base map with a labeled circular pin—ideal for editorial layouts.
Hybrid satellite
45° tilt with labels; styling JSON does not apply to raster imagery.
Multi-location · auto bounds
Four color-coded pins with fitBounds padding; mint-tinted light style flips to the dark palette with the theme toggle.
List-driven map focus
Click a venue to pan and zoom; warm light styling swaps for dark tiles automatically.
Keyboard-accessible list items.
Single map · type switcher
Bootstrap button group swaps mapTypeId; custom JSON applies only on roadmap so aerial views stay photographic.
Triptych previews
Three compact embeds: terrain, styled roadmap (theme-aware), and raw satellite.
Terrain
Relief shading, minimal UI.
Road + theme
Matches light/dark site chrome.
Satellite
Photographic tiles.
Regional inset
Grayscale light view with a deep-water dark counterpart—use for “service area” callouts.
Orange County coverage
Rounded container with generous padding; map sits inside the card body.
Cinematic chromeless
No default controls—great behind glassmorphism or as a muted backdrop.
Drag to explore · scroll zoom disabled