1

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>
s-hunter
  • 24,172
  • 16
  • 88
  • 130
  • As per https://stackoverflow.com/a/28688624/11269204, it seems that there is no way to move the maps toolbar. You can file a feature request for this matter in Google Maps API Public Issue Tracker: https://issuetracker.google.com/issues?q=status:open%20componentid:188851&s=created_time:desc – jabamataro Jan 31 '22 at 08:52

1 Answers1

0

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,
  
      });
Midlaj K
  • 47
  • 8