React Native
Marker
Learn to mark locations with Marker.
Marker
Marker drops a marker (pin) at a specific coordinate on the map. The coordinate prop of the component sets the marker's position; this prop takes an object: { latitude, longitude }. A Marker must be inside a MapView.
Example: <MapView><Marker coordinate={{{ latitude: 41.0082, longitude: 28.9784 }}} /></MapView>. This drops a marker at Istanbul. The Marker can also take title and description props; when the user taps the marker a bubble opens and shows these texts. With multiple Markers you can mark multiple points.
title and description
You can give a Marker title and description props. When the user taps the marker a bubble opens; the bubble's heading shows title and the subheading shows description. This helps the user understand what the marker represents.
Example: <Marker coordinate={{{ latitude: 41.0082, longitude: 28.9784 }}} title="Istanbul" description="Historic peninsula" />. When there are multiple markers giving each a meaningful title makes the map readable. title is the bubble's main text, description is the secondary explanation. These props are optional; but in real apps they are always used.
Exercise Drop a marker at Istanbul
Complete the empty App component. Open <MapView style={{{ flex: 1 }}} initialRegion={{{ latitude: 41.0082, longitude: 28.9784, latitudeDelta: 0.05, longitudeDelta: 0.05 }}}>. Inside add <Marker coordinate={{{ latitude: 41.0082, longitude: 28.9784 }}} title="Istanbul" />. Close MapView.
Show example solution
return (
<MapView
style={{ flex: 1 }}
initialRegion={{
latitude: 41.0082,
longitude: 28.9784,
latitudeDelta: 0.05,
longitudeDelta: 0.05,
}}
>
<Marker
coordinate={{ latitude: 41.0082, longitude: 28.9784 }}
title="Istanbul"
/>
</MapView>
);
Test yourself
-
Write the coordinate prop
<Marker ____={{ latitude: 41.0, longitude: 28.9 }} />
Show answer
<Marker coordinate={{ latitude: 41.0, longitude: 28.9 }} />
-
What does the Marker's coordinate prop take?
<Marker coordinate={???} />
- A string address
- A number: only latitude
- An object: latitude and longitude
- An array: a list of coordinates
Show answer
An object: latitude and longitude — coordinate takes an object; it carries latitude and longitude.
-
Match each prop to its purpose
- coordinate
- Marker position
- title
- Bubble heading
- description
- Bubble description
- MapView
- Map container
Next lesson: onRegionChange
