How to move the direction and map icons to top right corner in embedded google map?

user_2069407 0
Viewed 530

I'm using the react-native-maps library to render an embedded Google Map in a react native app. There is a map tool bar which shows up at the bottom right corner when a marker on the map is pressed. On this tool bar, there is a direction icon for opening the original Google Map to get directions and there is a map icon for opening the original Google Map to show the place the marker is pressed.

enter image description here

I want to move this map tool bar from the bottom right corner to the top right corner. Is there a way to do this within the react-native-maps library or directly in Android code?

Here is the code I use to display the map and a marker:

const styles = StyleSheet.create({
    container: {
      flex: 1,
    },
    mapContainer: {
      height: 300,
      width: '100%',
      justifyContent: 'center',
      alignItems: 'center',
      marginTop: 16,
    },
    map: {
      ...StyleSheet.absoluteFillObject,
    },
});

<View style={styles.mapContainer}>
  <MapView
    style={styles.map}
    initialRegion={{
      latitude: 37.78825,
      longitude: -122.4324,
      latitudeDelta: 0.0922,
      longitudeDelta: 0.0421,
    }}
  >
    <Marker
      tracksViewChanges={false}
      coordinate={{
        latitude: 37.78825,
        longitude: -122.4324,
      }}
    />
  </MapView>
</View>
react-native-maps react-native google-maps android
1 Answers

you can do something like this to change the position bit higher with padding

  mapRef.current.fitToSuppliedMarkers(list.map(({ Reg_No }) => Reg_No),{ edgePadding: 
        {top: 650,
          right: 100,
          bottom: 500,
          left: 100},
          animated: true,
  
      });
user_135660140
Related