Clickable Mapview Marker

Issue

I'm trying to make a Marker clickable in react native. For instance, for a specific restaurant I want to show the marker, and when the user clicks on it, the name of the restaurant (which works right now), and when the user clicks on the name of the restaurant, it goes directly onto their website. Just for the sake of it:

constructor(props){
    super(props);
    this.state = {
      name: "",
      email: "",
      region: {
        // luxembourg region
        latitude: 49.6116,
        longitude: 6.1319,
        latitudeDelta: 0.0922,
        longitudeDelta: 0.0421,
      },
      markers: [{
        title: 'Royal Bengal',
        coordinates: {
        latitude: 49.606259,
        longitude: 6.105683
        }}
        ]};
}

later to display the map:

<MapView
            style={styles.map}
            region={this.state.region}
            showUserLocation = {true}
            >
              {this.state.markers.map((marker, index) => (
                <MapView.Marker
                  key = {index}
                  coordinate = {marker.coordinates}
                  title = {marker.title}
                  // Icon =
                  // pinColor = {'#474744'}
                /> )
              )}

Say I want the user to go to google.com when he clicks on Royal Bengal, how should I do that? Looking at the documentation with onPress and others has not been extremely helpful.

Solution

<MapView.Marker
   key = {index}
   onPress={() => Linking.openURL('your-url')}
   coordinate = {marker.coordinates}
   title = {marker.title}
 />

According to the react-native-maps docs, the onPress event is what makes a marker clickable. To open a link in the default browser of the device, use Linking.openURL('your-url') as per the react-native docs

Answered By - Woyong