0

How to display different details in CallOut for different different Marker.

enter image description here

I have two API to fetch data where I am taking id's from first API and put end of the 2nd API and fetch data from both API.

Now, from the 2nd API I get latitude, longitude to display Marker in Map.

I want to display for the Marker some details like callout from 1st Api where each Marker will have different details based on their id's

Suppose 1st API has (id,no,address,email,phone)

1st API:

[[01, M401, JPG, loca01@gmail.com, 556623],[02, M402, JPGG, loca02@gmail.com, 556624]]

2nd API:

[[01, 40.6971494, -74.2598657],[02, 40.596708, -74.154072]]

so Basically I want to display in CallOut for Marker based on id's the other details of 1st API for each Marker.

here is my code:

return (
        <ScrollView contentContainerStyle={styles.scrollView}
            refreshControl={
                <RefreshControl
                    refreshing={refreshing}
                    onRefresh={onRefresh}
                />
            }
        >
            <MapView
                style={styles.map}
                initialRegion={{
                    longitude: -74.2598657,
                    latitude: 40.6971494,
                    latitudeDelta: 0.4,
                    longitudeDelta: 0.4,
                }}
            >
                {results?.map((m) => <Marker
                    coordinate={{
                        latitude: m[1],
                        longitude: m[2],
                    }}
                >
                    <Callout>
                        <Text>{`Hello World! ${callOut}`}</Text>
                    </Callout>
                </Marker>
                )}            
            </MapView>
        </ScrollView>
    );

Please help me to show callout for each marker with different details.

Thanks for Your trying in Advance!.

user19891844
  • 33
  • 1
  • 1
  • 6

0 Answers0