How to centre and zoom in on multiple markers with google-maps-react?

Question

I found this stack overflow link that does it with vanilla javascript, however it uses methods that I don't see in the google-maps-react API like LatLngBounds and bounds.extend(), however it does have maps.fitbounds().

Am I missing misreading the API or do those methods really not exist on google-maps-react. If not then how would I go about centering and zooming in on multiple markers on the map.

Answer 1

I don't think google-maps-react has a native way to accomplish this, you must the google maps api directly through the onGoogleApiLoaded prop.

Tidbit from this examples this example:

    // Fit map to its bounds after the api is loaded
const apiIsLoaded = (map, maps, places) => {
  // Get bounds by our places
  const bounds = getMapBounds(map, maps, places);
  // Fit map to bounds
  map.fitBounds(bounds);
  // Bind the resize listener
  bindResizeListener(map, maps, bounds);
};

class Main extends Component {
  constructor(props) {
    super(props);

    this.state = {
      places: [],
    };
  }

  componentDidMount() {
    fetch('places.json')
      .then((response) => response.json())
      .then((data) => this.setState({ places: data.results }));
  }

  render() {
    const { places } = this.state;
    return (
      <>
        {!isEmpty(places) && (
          <GoogleMap
            defaultZoom={10}
            defaultCenter={LOS_ANGELES_CENTER}
            yesIWantToUseGoogleMapApiInternals
            onGoogleApiLoaded={({ map, maps }) => apiIsLoaded(map, maps, places)}
          >
            {places.map((place) => (
              <Marker
                key={place.id}
                text={place.name}
                lat={place.geometry.location.lat}
                lng={place.geometry.location.lng}
              />
            ))}
          </GoogleMap>
        )}
      </>
    );
  }
}

export default Main;