How to get map center coordinates from markers array in react google maps?

Question

Google Maps

Colleagues, good day, I can not find a solution unfortunately.

The bottom line is, there is a @react-google-maps/api package on the page I draw a map:

<div className="searchMap">
      <LoadScript googleMapsApiKey={ mapConfig.key } >
        <GoogleMap
          mapContainerStyle={ containerStyle }
          center={{
            lat: -3.745,
            lng: -38.523
          }}
          zoom={ zoom }
          onLoad={ onLoad }
          onUnmount={ onUnmount }
        >
          {
            markers.map(({ lat, lng }, index) =>
              <Marker
                key={ index }
                position={{ lat, lng }}
              />
            )
          }
        </GoogleMap>
      </LoadScript>
    </div>

everything is simple here and the map and markers are rendered normally, the problem is that when rendering markers, you need to get the center of the map based on the coordinates of these markers and determine the zoom. If someone did this, please tell me which way to look, thank you in advance

Answer 1

https://developers.google.com/maps/documentation/j... Extend
it with all markers. Then you can take the cent of this rectangle, which covers all the markers. Although the mind should not take the center and try to guess the zoom, but call fitBoundsthe card.