Components Property map

Property map

Compact View map and Google Earth actions for property addresses. The modal lazily boots Google Maps on first open, offers Map, Satellite, 3D, and Street view modes, and falls back to an embedded Google Maps frame if map tiles do not load.

<koala-property-map>

Canonical

Google Earth

<koala-property-map address="@property.FormattedAddress" postcode="@property.Postcode" />

The helper emits the action pair inline. The modal uses a full-height mobile sheet and a square desktop map area with one four-way segmented control.

Variants

4 modes

Map

Roadmap tiles with the address pin centred.

Satellite

Default opening mode. Hybrid imagery with labels.

Hybrid imagery, zoomed and tilted where supported.

Street view

Outdoor panorama near the geocoded property.

States

3 states

Loaded

Tiles rendered, pin centred.

Skeleton

Before Google Maps boots.

Location not available

No address

Address blank or geocoding failed.

Props

usage notes

Prop / contract	Notes
address	Required formatted address string. Blank addresses suppress the helper.
postcode	Optional. When supplied, applied as a Google geocoder postal-code component restriction so ambiguous street names resolve to the right location.
GoogleMaps:ApiKey	Required configuration. Without it, the helper renders nothing and the layout skips the Maps API script.
initPropertyMaps	The layout defines this global callback before loading the async Google script, then flushes queued map initialisers once the API is ready.
propertyMap(address, mapsUrl, postcode)	Alpine component owned by the layout. It queues first-open initialisation until Google Maps is ready.
Fallback embed	Map, Satellite, and 3D modes swap to a Google Maps iframe when JS map tiles do not report loaded quickly. Street view remains JS API-backed.
Google Earth	Inline external anchor next to View map with `target="_blank"` to earth.google.com.

Do & don't

Map Satellite 3D Street

Do Keep one stable segmented control in the map chrome so users can switch modes without hunting around the modal.

Map Satellite 3D Street Earth Layers Pan

Don't Don't crowd the top edge. The map disappears under the chrome and nothing is glanceable.