I am using react-native-maps module.I have given lat and long values and i have used MapView.Marker to show the Marker and tooltip when clicking on the marker.
But, Now I want to show the tooltip with out clicking on the marker when the map loads initially.
this is my code here:
<View style={styles.page}>
<MapView
ref="map"
style={styles.map}
region={this.state.region}
provider = {PROVIDER_DEFAULT}
zoomEnabled={true}
onRegionChange={this.onRegionChange.bind(this)}
pitchEnabled={true}
showsCompass={true}
liteMode={false}
showsBuildings={true}
showsTraffic={true}
showsIndoors={true}
>
<MapView.Marker
coordinate={this.state.marker.latlng}
title={this.state.marker.title}
description={this.state.marker.description}
image={require('./assets/pin.png')}
/>
</MapView>
</View>
Can any one help how to solve this...
I couldn't find any documentation on any sort of onLoad prop for MapView so I used onLayout instead as suggested here. You will need to use the showCallout method for the Marker to show the tooltip. To do this, add a ref for the marker that you can then use in onLayout for the MapView.
<View style={styles.page}>
<MapView
ref="map"
style={styles.map}
region={this.state.region}
provider = {PROVIDER_DEFAULT}
zoomEnabled={true}
onRegionChange={this.onRegionChange.bind(this)}
pitchEnabled={true}
showsCompass={true}
liteMode={false}
showsBuildings={true}
showsTraffic={true}
showsIndoors={true}
onLayout={() => { this.mark.showCallout(); }}
>
<MapView.Marker
ref={ref => { this.mark = ref; }}
coordinate={this.state.marker.latlng}
title={this.state.marker.title}
description={this.state.marker.description}
image={require('./assets/pin.png')}
/>
</MapView>
</View>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With