Android Maps - Animatecamera() Method Not Working Proper

Problem: 1) Map getting animated to reach the required location(4th line in code) but it got zoomed to the default location(5th line in code) [leaving the map in the default locati

Solution 1:

The problem is that you call zoom right after you started animating to the new location. That's why it just replaces last camera update action with the new one.

You can simply resolve that by creating more accurate camera update action (which would include both latlng change AND zoom level change):

CameraPosition newCamPos = new CameraPosition(new LatLng(13.0810,80.2740), 
                                                  15.5f, 
                                                  map.getCameraPosition().tilt, //use old tilt map.getCameraPosition().bearing); //use old bearingmap.animateCamera(CameraUpdateFactory.newCameraPosition(newCamPos), 4000, null);

ALTERNATIVELY as pointed out by MaciejGórski, you can just use newLatLngZoom interface which includes both LatLng and zoom change:

map.animateCamera(CameraUpdateFactory.newLatLngZoom(new LatLng(13.0810,80.2740), 15.5f), 4000, null);

Solution 2:

Use CancelableCallback with first animateCamera and call second animateCamera in onFinish.

Example: AnimateCameraChainingExampleActivity.java

Solution 3:

useEffect(() => {
    const fetchLocation = async () => {
      const hasLocationPermission =
        Platform.OS === 'ios'
          ? awaitGeolocation.requestAuthorization('whenInUse')
          : awaitPermissionsAndroid.request(
              PermissionsAndroid.PERMISSIONS.ACCESS_FINE_LOCATION,
            );

      if (hasLocationPermission === 'granted') {
        awaitGeolocation.getCurrentPosition(
          position => {
            const {
              coords: {latitude, longitude},
            } = position;

            setLocation({
              latitude,
              longitude,
              latitudeDelta: 1,
              longitudeDelta: 1,
            });
          },
          error => {
            // See error code charts below.console.log(error.code, error.message);
          },
          {enableHighAccuracy: true, timeout: 15000, maximumAge: 10000},
        );
      }
    };

    fetchLocation();
  }, []);

  useEffect(() => {
    if (location && _map.current) {
      _map.current.animateCamera(
        {
          center: {
            latitude: location.latitude,
            longitude: location.longitude,
          },
          zoom: 15,
        },
        {duration: 5000},
      );
    }
  }, [location]);

  return (
    <Viewstyle={styles.container}><MapViewstyle={styles.map}provider={PROVIDER_GOOGLE}ref={_map}>
        {location && <Markercoordinate={location} />}
      </MapView></View>
  );
};