"Error using newLatLngBounds(LatLngBounds, int): Map size can't be zero...." using react-native-maps on Android

Question

I get an error: "Error using newLatLngBounds(LatLngBounds, int): Map size can't be zero. Most likely layout has not yet occured for the map view. Either wait until layout has occurred or use newLatLngBounds(LatLngBounds, int, int, int) which allows you to specify the map's dimensions".

But I set up an alert for getCurrentPosition and I'm receiving coordinates from getCurrentPosition().

import React, { Component } from 'react';
import { View, Dimensions } from 'react-native';
import MapView from 'react-native-maps';


const {width, height} = Dimensions.get('window')

const SCREEN_HEIGHT = height
const SCREEN_WIDTH = width
const ASPECT_RATIO = width / height
const LATITUDE_DELTA = 0.0922
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO


class Map extends Component {
 
 constructor(props) {
  super(props)

  this.state = {
   isMapReady: false,
   initialPosition: {
    longitude: 0,
    latitude: 0,
    longitudeDelta: 0,
    latitudeDelta: 0
   },

   markerPosition: {
    longitude: 0,
    latitude: 0
   }

  }
 }

 watchID: ?number = null

 componentDidMount() {
  navigator.geolocation.getCurrentPosition((position) => {

   alert(JSON.stringify(position))

   var lat = parseFloat(position.coords.latitude)
   var long = parseFloat(position.coords.longitude)

   var initialRegion = {
    latitude: lat,
    longitude: long,
    latitudeDelta: LATITUDE_DELTA,
    longitudeDelta: LONGITUDE_DELTA
   }

   this.setState({initialPosition: initialRegion})
   this.setState({markerPosition: initialRegion})   
  },

  (error) => alert(JSON.stringify(error)))

  this.watchID = navigator.geolocation.watchPosition((position) => {
   var lat = parseFloat(position.coords.latitude)
   var long = parseFloat(position.coords.longitude)
   
   var lastRegion = {
    latitude: lat,
    longitude: long,
    longitudeDelta: LONGITUDE_DELTA,
    latitudeDelta: LATITUDE_DELTA
   }

   this.setState({initialPosition: lastRegion})
   this.setState({markerPosition: lastRegion})
  })

 }

 componentWillUnmount() {
  navigator.geolocation.clearWatch(this.watchID)
 }

 onMapLayout = () => {
    this.setState({ isMapReady: true });
  }

 render() {

  return (

   <View style={styles.containerStyle}>
    <MapView style={styles.mapStyle} initialRegion={this.state.initialPosition} onLayout={this.onMapLayout}>
     { this.state.isMapReady &&
      <MapView.Marker coordinate={this.state.markerPosition}>
      </MapView.Marker>
     }
    </MapView>
   </View>

   )

 }

}

const styles = {
 containerStyle: {
  flex:1,
  justifyContent: 'center',
  alignItems: 'center',
  backgroundColor: 'lightblue'
 },

 mapStyle: {
  left: 0,
  right: 0,
  top: 0,
  bottom: 0,
  position: 'absolute'
 }

}

export default Map;

I have no idea what's going wrong to be honest... would really appreciate some help! Thank you!!

Take a look at this GitHub Issue as well: https://github.com/react-native-maps/react-native-maps/issues/3154#issuecomment-780740260 — Joshua Pinter, Feb 17 '21 at 18:01

score 11 · Answer 1 · answered Feb 26 '20 at 08:05

this happens because the map view was not initialized yet. move the call to within the onMapLoaded overriden event. within your

  @Override
    public void onMapReady(GoogleMap googleMap)

add :

googleMap.setOnMapLoadedCallback(new GoogleMap.OnMapLoadedCallback() {
                    @Override
                    public void onMapLoaded() {
                        //Your code where the exception occurred goes here    
                    }
                });

score 5 · Answer 2 · answered Dec 10 '17 at 10:14

I fixed it! So i tried setting mapStyle's width and height but it wasn't working, changed API key, and it still wasn't showing up, tried adding 'flex:1' to containerStyle but it still didn't work until I passed actual height & width values to the container containing my map!

score 4 · Answer 3 · answered Dec 09 '17 at 11:38

4

In you Map Styles you Should Provide Screen Width and Height or Flex :1

mapStyle: {
       width : SCREEN_WIDTH | SomeValue ,
       height : SCREEN_HEIGHT | SomeValue 
    }

answered Dec 09 '17 at 11:38

Syed Zain Ali

1,206
1
14
20

score 2 · Answer 4 · answered Apr 15 '19 at 07:58

I fixed it using onMapReady strategy , whenever you render a polyline or markers make sure you MapView is loaded.

Reason :
Once your MapView get ready render your Markers.

const { width, height } = Dimensions.get("window");
    class Map extends Component {
    constructor(props) {
        super(props);
        this.state = {
          isMapReady: false
        };
      }
     onMapLayout = () => {
        this.setState({ isMapReady: true });
      };

    render(){
    return(
        <MapView
                  initialRegion={{
                    latitude:"your lat" ,
                    longitude:"your lng" ,
                    latitudeDelta: 0.0922,
                    longitudeDelta: 0.0421
                  }}
                  onMapReady={this.onMapLayout}
                  provider={PROVIDER_GOOGLE}
                  loadingIndicatorColor="#e21d1d"
                  ref={map => (this.map = map)}
                  style={{
                    width,
                    height,
                  }}
                  loadingEnabled={true}
                >
     {this.state.isMapReady && <MapView.Marker
            key="your key"
            identifier="marker"
            coordinate={{
              latitude: "lat",
              longitude: "lng"
            }}
            flat={true}
            anchor={anchor}
            image={image}
          />
         }
          </MapView>
         );
      }
    }

score 2 · Answer 5 · answered Aug 11 '20 at 00:18

I researched a lot looking for a solution and why this error is happening, but I didn't find any correct answer as to why this happens and neither i tested at a low level to understand what really happens, but with some tests i realized that the component needs an absolute size to be able to receive animations and to be manipulated.

So, in order to keep the size of the map relative to the size of the View (my home page) I created a parent container for MapView that is flexible, fills the available size and provides, through the onLayout property, an absolute size for MapView.

here's an example of how it works:

const [mapViewContainerLayout, setMapViewContainerLayout] = useState<LayoutRectangle>();

<View>
   <MapContainer 
     onLayout={(e: LayoutChangeEvent) => {
        setMapViewContainerLayout(e?.nativeEvent?.layout);
     }}>
     {mapVieContainerLayout && (
         <MapView
            ...
            style={{ 
              width: mapViewContainerLayout?.width,
              height: mapViewContainerLayout?.height
            }}
            ...
         </MapView>
     )}
   </MapContainer>
</View>

score 2 · Answer 6 · answered Mar 04 '21 at 17:29

I had same problem, with flex: 1 I was getting error so I set fixed width: and height:. But still this wasn't ideal I really needed flexibility of flex: 1. Finaly I made it work and preserved use of flex by using minHeight: instead of height:

{
  minHeight: Dimensions.get("window").height - APPROX_HEIGHT_OF_OTHER_ELEMENTS,
  flex: 1,
}

score 0 · Answer 7 · answered Dec 09 '17 at 11:50

0

Change Api Key. That only the reason to show functional map.

answered Dec 09 '17 at 11:50

Pawan Soni

860
8
19

score 0 · Answer 8 · answered Oct 08 '21 at 11:31

0

In Kotlin this seems to have worked:

map.setOnMapLoadedCallback {
 map.moveCamera(CameraUpdateFactory.newLatLngBounds(cameraBounds, 0))
}

answered Oct 08 '21 at 11:31

Thiago

12,778
14
93
110

score 0 · Answer 9 · answered Nov 09 '21 at 16:01

0

i had a scrollView as parent component and that was giving issue and wouldnt work unless i gave height, but removing parent scrollView it now works perfectly with flex:1

answered Nov 09 '21 at 16:01

user1462498

354
1
4
10

score 0 · Answer 10 · answered Mar 08 '22 at 14:06

If you are using RawBottomSheet then you need to have minHeight equal to the Raw bottom sheet in MapView style i.e

  <MapView
        onPress={e => handleMapMarker(e.nativeEvent.coordinate)}
        showsUserLocation={true}
        showsIndoorLevelPicker={false}
        showsBuildings={false}
        ref={mapView}
        provider={PROVIDER_GOOGLE}
        customMapStyle={mapStyle}
        initialRegion={region}
        region={region}
        onMapReady={handleMap}
        loadingEnabled={true}
        loadingIndicatorColor="#e21d1d"
        // showsMyLocationButton={true}
        style={{
          flex: 1,
          minHeight: height * 0.8,
        }}>
        {isMapReady && (
          <MarkerComp
            setMarker={setMarker}
            coordinate={{...marker}}
            handleMapMarker={handleMapMarker}
          />
        )}
      </MapView>

score 0 · Answer 11 · answered Jun 22 '23 at 12:33

Wait until map layout is being ready:

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        mapView = findViewById(R.id.mapGoogle) as? MapView
        mapView?.onCreate(savedInstanceState)
        mapView?.getMapAsync(this)
}

override fun onMapReady(googleMap: GoogleMap) {
        // wait for map layout ready
        mapView?.post {
            drawRoute(googleMap) //todo make some with your map
        }
}

score 0 · Answer 12 · answered Aug 04 '23 at 15:29

The method isMapReady worked for me! `

<MapView

    style={{ height: 100, width: 120, borderWidth: 1 }}
                zoomEnabled={false}
                scrollEnabled={false}
                onLayout={this.onMapLayout}
                initialRegion={{
                  latitude,
                  longitude,
                  latitudeDelta: 0.04,
                  longitudeDelta: 0.04,
                }}>
                {isMapReady &&
                  <Marker coordinate={{ latitude, longitude }} />
                }
           </MapView>

`

"Error using newLatLngBounds(LatLngBounds, int): Map size can't be zero...." using react-native-maps on Android

12 Answers12