Search code examples
reactjsreact-native-maps

How to center two markers with react native map view

I got two markers at two different coordinates.

How do people normally center two markers so that you can see two marker at the same time on map, regardless how far away they are.

<MapView 
ref={ (map)=> this.map = map}
initialRegion={this.state.init} 
style={css.map}>    
    { this.state.marker1 !==0 && <MapView.Marker 
        coordinate={{
            'latitude':this.state.marker1.lat,
            'longitude':this.state.marker1.lng}}
        />}
    { this.state.marker2 !==0 && <MapView.Marker 
        coordinate={{
            'latitude':this.state.marker2.lat,
            'longitude':this.state.marker2.lng}}
        />}
</MapView>
Solution

  • You can use the fitToSuppliedMarkers or fitToCoordinates method of the MapView. https://github.com/react-native-community/react-native-maps/blob/master/docs/mapview.md