Как получить координаты центра карты из массива маркеров в react google maps?

Question

[Роман Андреевич]

Коллеги, доброго времени суток, не могу найти решения к сожалению.

Суть такая, есть пакет @react-google-maps/api на странице рисую карту:

<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>

тут собсна все просто и карта и маркеры рендерятся норм, проблема в том, что при рендере маркеров нужно получить центр карты исходя из координат этих маркеров и зум определить, Если кто-то делал подобное подскажите пожалуйста в какую сторону смотреть, заранее благодарю

Answer 1

[freeExec]

https://developers.google.com/maps/documentation/j...
Расширяете его с помощью всех маркеров. Потом можете взять цент этого прямоугольника, который охватывает все маркеры. Хотя по уму надо не центр брать и пытаться зум угадать, а вызывать fitBounds у карты.

Comments

[Роман Андреевич]

Это я уже понял! LatLngBounds class принимает по сути начальное значение какое-то. У меня же массив, которые рисуется на карте и к нему нужно переехать))

const markersCoords = products.map(({ productDetails: { startLatitude, startLongitude } }) => {
      return googleMap.Marker({
        position: {
          lat: +startLatitude,
          lng: +startLongitude
        },
        map
      })
    })

    const bounds = new window.google.maps.LatLngBounds()

    map.fitBounds(bounds)

    setMap(map)

Это собственно load событие карты, в нем инициализирую ее и собираю маркеры

[freeExec]

Роман Андреевич,

Расширяете его с помощью всех маркеров.