Components
Property map
Property map
Google Maps + Street View embedded in a modal. View pill top-left, camera pill top-right, Google Earth link bottom-right. Defers initMap() until the modal opens so the tile container has a non-zero size.
Canonical
Square aspect, four-corner overlays. Bottom-centre pill for “move with device” (touch only) and a Google Earth deep link bottom-right.
Variants
4 variantsMap 2D
Map 2D
Default. Cream parcels, white roads.
Map 3D
Map 3D
Tilted parcels, oblique camera.
Satellite 2D
Satellite 2D
Imagery overhead.
Satellite 3D
Satellite 3D
Imagery, oblique camera.
States
3 statesLoaded
Tiles rendered, pin centred.
Skeleton
Before Google Maps boots.
Location not available
No address
Address blank or geocoding failed.
Props
usage notes| Element | Notes |
|---|---|
| Container | aspect-square rounded-md overflow-hidden border border-outline relative inside the modal. |
| Map / Satellite pill | Top-left, rounded-full on bg-surface-container, white slider tracks the active label. |
| 2D / 3D pill | Top-right, same pill shape. The camera tilts the tile container, not the pin. |
| Move with device | Bottom-centre floating pill, only meaningful on touch devices. |
| Google Earth | Bottom-right anchor with target="_blank" to earth.google.com. |
Do & don't
Do
Anchor overlays to corners. View pill top-left, camera pill top-right, Google Earth bottom-right.
Map
Satellite
2D
3D
Move
Earth
Layers
Pan
Don't
Don't crowd the top edge. The map disappears under the chrome and nothing is glanceable.