react-native-maps: Error on using fitToElements

To set the Google Map zoom level to show all the markers, I was suggested to use fitToElements but I am getting error “not included points”

Here is my code and markers have 2 points:

  componentDidMount() {
    this.refs.map.fitToElements(true);
  }

  render() {
    var markers = this.props.markers || [];
    return (
      <MapView
        ref="map"
        style={[styles.map, this.props.mapStyle]}
        initialRegion={this.getInitialRegion(markers)}>
        {markers.map(marker => (
          <MapView.Marker 
            coordinate={marker.latlng}
            title={marker.title}
            description={marker.description}
            image={marker.image}/>
        ))}
      </MapView>
    );
  }

About this issue

Original URL
State: closed
Created 8 years ago
Reactions: 4
Comments: 31 (10 by maintainers)

Most upvoted comments

@igrayson We actually just need a onMapReady event.

bcalik on Jun 26, 2016

fitToElements wasn’t working here either so I used the onLayout prop callback on MapView:

onMapLayout = () =>
    this.map.fitToElements(true);

render() {
  return (
    <MapView
      ref={ref => this.map = ref}
      onLayout={this.onMapLayout}
    >
      {/* stuff */}
    </MapView>
  );
}

lucasbento on Aug 15, 2017

Not sure if thats the issue but can you cast the latitude and longitude to a float?

jrichardlai on Apr 14, 2016

@ddresch Probably the ref has not been set yet which is the case 'fitToElements" of null"

Try this out : ref = { (MapRef)=> if( MapRef !=null ) { MapRef.fitToElements(true) } }

symmetriccurve on Sep 2, 2016

I feel like this is a required feature for any map with markers or am I the only one?

ryanmclaughlin on Jun 10, 2016