Marker
- React Native course
- Advanced
- Lesson 27/83
- 5 min
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.
Practice 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.
Starter code
import { MapView, Marker } from 'react-native-maps';
export default function App() {
// drop a marker at Istanbul
return null;
}Sample 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>
);Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Write the coordinate prop
<Marker ____={{ latitude: 41.0, longitude: 28.9 }} /><Marker coordinate={{ latitude: 41.0, longitude: 28.9 }} />Explanation: The coordinate prop takes the marker's position.
2 What does the Marker's coordinate prop take?
<Marker coordinate={???} />- A string address
- A number: only latitude
- An object: latitude and longitude Correct answer
- An array: a list of coordinates
Explanation: coordinate takes an object; it carries latitude and longitude.
3 Match each prop to its purpose
| Term | Meaning |
|---|---|
coordinate |
Marker position |
title |
Bubble heading |
description |
Bubble description |
MapView |
Map container |