Search code examples
react-nativereact-native-maps

React Native Maps Go to Marker


So I am building an app that is refreshing a GPS position with a marker. The problem is that the initial region is not near the marker and will change.

I have a button to refresh the GPS position, is there a way to have the map go to the marker?

I do not see anything in the documentation that states this.

<MapView
      style={styles.map}
      initialRegion={region}
      ref={_map}
      onRegionChangeComplete={region => {setRegion(region)}}
    >
      <Marker
        coordinate={{
          latitude: lat,
          longitude: long,
        }}
        key={lat}
        title="Location"
        style={{width: 26, height: 40}}
        description={address}
        resizeMode='contain'
      />
    </MapView>

Solution

  • You can use de asttribute animateToRegio of react-native-maps.

    Something like this:

    function getLocation(){
        Geolocation.getCurrentPosition(position => {
          const region = {
            latitude: position.coords.latitude,
            longitude: position.coords.longitude,
            latitudeDelta: 0.0043,
            longitudeDelta: 0.0034
          };
          map.current.animateToRegion(region, 500);
        });
      };
    

    Then, on a button or whatever you want, you can call that function to go to your position, or you can change latitude and longitude to your marker coords