Skip to main content
Map(props: MapProps, children?: Component[]): Component;
​
latitude
number
required
Center latitude of the map camera.
​
longitude
number
required
Center longitude of the map camera.
​
distance
number
default:"1000"
Camera distance from the center point in meters.
​
style
"standard" | "imagery" | "hybrid"
default:"standard"
The map rendering style.
​
interactionModes
("pan" | "zoom" | "rotate" | "pitch" | "all")[]
Which interaction modes are enabled. Defaults to all modes.
​
controls
("compass" | "scale" | "userLocation" | "pitch")[]
Map controls to display. Omit for system defaults, pass [] to hide all controls.
​
showsUserLocation
boolean
Whether to show the user’s location as a blue dot on the map.
​
onCameraChange
(camera: { latitude: number; longitude: number; distance: number; heading: number; pitch: number }) => void
Callback fired when the camera position changes.
​
cameraChangeFrequency
"onEnd" | "continuous"
default:"onEnd"
How often the onCameraChange callback fires. "onEnd" fires only when the user stops moving the camera, "continuous" fires during movement.
​
onSelect
(tag: string | null) => void
Callback fired when a tagged marker or annotation is selected. Receives null on deselection.
​
children
Component[]
Map content such as Marker, Annotation, MapCircle, MapPolyline, and MapPolygon components.

​
Support

​
Usage

​
Basic map

Map({ latitude: 37.7749, longitude: -122.4194, distance: 5000 })

​
Map with markers

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

​
Satellite map with controls

Map({
    latitude: 48.8584,
    longitude: 2.2945,
    distance: 2000,
    style: "imagery",
    controls: ["compass", "scale"]
})

​
Map with camera tracking

const body = () => {
    const [camera, setCamera] = useState(null)
    return VStack([
        Map({
            latitude: 37.7749,
            longitude: -122.4194,
            distance: 5000,
            onCameraChange: (cam) => setCamera(cam),
            cameraChangeFrequency: "onEnd"
        }),
        camera ? Text(`Lat: ${camera.latitude.toFixed(4)}, Lng: ${camera.longitude.toFixed(4)}`) : Empty()
    ])
}

​
Map with selection

const body = () => {
    const [selected, setSelected] = useState(null)
    return Map({
        latitude: 37.7749,
        longitude: -122.4194,
        distance: 10000,
        onSelect: (tag) => setSelected(tag)
    }, [
        Marker({ latitude: 37.7749, longitude: -122.4194, title: "SF", tag: "sf" }),
        Marker({ latitude: 37.8044, longitude: -122.2712, title: "Oakland", tag: "oak" })
    ])
}

​
See Also