In this lesson we'll create a MapView with react-native-maps. We'll use the `onPress` function to add `Markers` to the map and then we'll use the custom map marker feature to style them.

https://app.egghead.io/api/v1/lessons/react-create-a-custom-map-marker-with-react-native-maps/subtitles

Create a Custom Map Marker with React Native Maps

[00:00] We'll start by importing map view and marker from React Native Maps. We'll now go change our view to map view and also add an initial region. The initial region is latitude, longitude and then delta which will then determine how far out the map is zoomed.

[00:23] It is important to note that we have a styles.container which is flex one which means that the map view will take up the entire screen. Now, if I refresh your emulator, you can see that the map is now filling in. Next, we'll open up our map view and then reclose it.

[00:38] We'll then type this.state.markers and we'll map over our markers, which takes a function, and we'll pass in the argument of marker. We'll then return marker that you imported from map view, and then we'll spread our marker onto the marker component.

[00:57] Now, we'll create a handle press function which will handle the press from the map view, which has an event. We'll also bind this to handle press to this so that we can use the this context. We'll then in an on press term map view and call this.handlepress. Then in our handle press, we'll call this.setstate.

[01:20] You'll add markers which is an array. We'll spread our previous markers into the array and we'll add a new coordinate and we'll e.nativeevent.coordinate and also cost that we'll display, which will be a template string with a dollar sign and a dollar sign and we'll say get random int from $50 to $300.

[01:46] Now, if we go and we refresh your emulator and we click anywhere, we will add a marker to the screen, however, it is not a custom marker yet. We'll clear that, and then we'll go add a custom view to our marker.

[02:04] First, we'll wrap this in parentheses. We'll reopen our marker and close our marker, and then anytime we add a custom view as a child to the marker, it'll be rendered on the map view. We'll add a view here, we'll add some text into our marker.cost, close the text. Then we have a custom style to style equals styles.marker.

[02:32] As you can see here, we have a marker with a background color, a padding and a border radius. Additionally, we have a style equals styles.text for our text that we're rendering as the marker. Now, when we go and refresh, and we click anywhere on the screen, our custommarkers are being added.

Create a Custom Map Marker with React Native Maps

Share this video with your friends