Is there a pattern to use fitBounds?

[MauricioRobayo]

Hello, I want to render a map but I don't know ahead of time the postion of the map, it is derived from the markers I am rendering.

Something like this:

import { APIProvider, Map, Marker, useMap } from "@vis.gl/react-google-maps";
import { useEffect } from "react";

const markers = [
  { id: 1, position: { lat: 30.2672, lng: -97.7431 } }, // Austin, TX
  { id: 2, position: { lat: 29.7604, lng: -95.3698 } }, // Houston, TX
  { id: 3, position: { lat: 29.4241, lng: -98.4936 } }, // San Antonio, TX
];

function App() {
  return (
    <APIProvider apiKey="<API KEY>"
      <div style={{ width: "800px", height: "500px" }}>
        <GoogleMap />
      </div>
    </APIProvider>
  );
}

function GoogleMap() {
  const map = useMap();
  useEffect(() => {
    if (!map) return;
    if (markers?.length) {
      const bounds = new google.maps.LatLngBounds();
      markers.forEach(({ position }) => {
        bounds.extend(position);
      });
      map.fitBounds(bounds);
    }
  }, [map]);
  return (
    <Map defaultCenter={{ lat: 0, lng: 0 }} defaultZoom={0}>
      {markers.map(({ position, id }) => (
        <Marker key={id} position={position} />
      ))}
    </Map>
  );
}

export default App;

Since I don't know the bounds ahead of time but I need to render the map to be able to calculate the bounds based on the markers, this can cause a flash of content where the map is rendered based on the default center and zoom and then swaps to use the bounds.

Is this the way to do it or is there another pattern to follow to avoid rendering the map until the bounds are known?

[usefulthink]

You can also use the Map.defaultBounds prop for this.

But since the google.maps.LatLngBounds class isn't available initially, it would probably be best to implement that yourself, here's a very naïve implementation to get started (this doesn't work around the antimeridian):

const bounds = markers.reduce((bounds, {position}) => ({
  west: Math.min(bounds.west, position.lng), 
  east: Math.max(bounds.east, position.lng),
  north: Math.max(bounds.north, position.lat),
  south: Math.min(bounds.south, position.lat)
}), {west: 180, east:-180, north:-90, south:90});

[MauricioRobayo]

that makes sense to me, I'll try it, thanks @usefulthink !