Hi I'm new here and I'm new in react-native-maps so there is my question: How can I render mulitples Markers when i press the map with onPress in react-native-maps ?
I can just do a simple marker with my onPress method and I don't know how can I do more than one marker on the map if someone can help me it must be very cool
my code :
...
const Carte = (props) => {
const [loc, setloc] = React.useState({
key: 0,
latitude: 48.856614,
longitude: 2.3522219,
})
return (
<SafeAreaView style={{ flex: 1 }}>
<GooglePlacesAutocomplete
placeholder="Search"
fetchDetails={true}
GooglePlacesSearchQuery={{
rankby: "distance"
}}
onPress={(data, details = null) => {
// 'details' is provided when fetchDetails = true
console.log(data, details)
setRegion({
latitude: details.geometry.location.lat,
longitude: details.geometry.location.lng,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421
})
}}
query={{
key: "Your api key",
language: "fr",
components: "country:fr",
types: "establishment",
radius: 30000,
location: `${region.latitude}, ${region.longitude}`
}}
styles={{
container: { flex: 0, position: "absolute", width: "100%", zIndex: 1 },
listView: { backgroundColor: "white" }
}}
/>
<MapView
style={styles.map}
initialRegion={{
latitude: 48.856614,
longitude: 2.3522219,
latitudeDelta: 0.0922,
longitudeDelta: 0.0421
}}
onPress={(e) => {
setloc({
latitude: e.nativeEvent.coordinate.latitude,
longitude: e.nativeEvent.coordinate.longitude,
key: loc.key + 1
})
console.log("Pin Manuel", loc)
}}
provider="google"
>
<Marker coordinate={{ latitude: loc.latitude, longitude: loc.longitude }} draggable={true} pinColor="blue" key={loc.longitude, loc.latitude} />
<Circle center={loc} radius={500} fillColor="rgba(100,5,110,0.1)" />
</MapView>
</SafeAreaView>
)
}
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
map: {
width: Dimensions.get('window').width,
height: Dimensions.get('window').height,
},
});
export default Carte
Thanks a lot !