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!!
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,
}
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
}
});
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!
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>
);
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With