How can I render mulitples Markers when i press the map with onPress in react-native-maps?

Viewed 26

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 !

0 Answers
Related