For my internship, I have to create an app with a Maps view and markers called from an API (the standard GraphQL API). But I have to make the map Zoom on the marker when I click on it, and I don't understand how I can do that.
I looked for the documentation and I didn't understand it :
animateCamera(camera: Camera, {duration: number})
But what is a camera object ? I don't have one. And how can I call animateCamera ? With a ref (_mapRef.current.animateCamera) ?
Here is my code :
<MapView
style={styles.map}
mapType={viewType}
provider='google'
ref={_map}
>
{users !== undefined && users.map((item, index) => (
<Marker
key={'user_' + index}
title={item.username}
description={item.posts.data.length + ' posts'}
coordinate={{
latitude: item.address.geo.lat,
longitude: item.address.geo.lng
}}
onCalloutPress={() => {
navigation.navigate('SingleUser', {user: item})
}}
/>
))}
</MapView>
Thanks for the help
PS: This is my first question on Stack, please don't be rude and do not hesitate to tell me if I missed a rule ! :)
PPS: Why does Stack delete my 'Hello' I put at the beginning everytime I edit this post ?
React Native Maps Marker has a prop called onPress, you can use that to check when marker is clicked.
for example:
<Marker
key={'user_' + index}
title={item.username}
description={item.posts.data.length + ' posts'}
coordinate={{
latitude: item.address.geo.lat,
longitude: item.address.geo.lng
}}
onCalloutPress={() => {
navigation.navigate('SingleUser', {user: item})
}}
onPress={this.onMarkerClicked}
/>
Create a function onMarkerClicked
onMarkerClicked = () => {
_map?.current?.getCamera().then((camera) => {
camera.zoom += 1;
map?.current?.animateCamera(camera);
});
Camera object is present by default to track below attributes
export interface Camera {
center: LatLng;
heading: number;
pitch: number;
zoom: number;
altitude: number;
}