Skip to main content
Marker(props: MarkerProps): Component;
​
latitude
number
required
Latitude of the marker position.
​
longitude
number
required
Longitude of the marker position.
​
title
string
Title text displayed with the marker callout.
​
systemImage
string
System icon name (SF Symbols) for the marker glyph.
​
tint
Component
Tint color for the marker. Pass a Color value, e.g. Color("red").
​
tag
string
Tag for identifying this marker in the parent Map’s onSelect callback.

​
Support

​
Usage

​
Basic marker

Map({ latitude: 37.7749, longitude: -122.4194, distance: 5000 }, [
    Marker({ latitude: 37.7749, longitude: -122.4194, title: "San Francisco" })
])

​
Marker with custom icon and color

Map({ latitude: 40.7128, longitude: -74.006, distance: 3000 }, [
    Marker({
        latitude: 40.7128,
        longitude: -74.006,
        title: "New York",
        systemImage: "star.fill",
        tint: Color("orange")
    })
])

​
Tagged markers for selection

const body = () => {
    const [selected, setSelected] = useState(null)
    return Map({
        latitude: 37.7749,
        longitude: -122.4194,
        distance: 20000,
        onSelect: (tag) => setSelected(tag)
    }, [
        Marker({ latitude: 37.7749, longitude: -122.4194, title: "SF", tag: "sf" }),
        Marker({ latitude: 37.3382, longitude: -121.8863, title: "San Jose", tag: "sj" }),
    ])
}

​
See Also

  • Map — interactive map container
  • Annotation — custom view annotation