Как установить дефолтные точки на гугл карте api?

Question

[starkingdom]

Есть карта добавленная с помощью гугл мап api. Код прилагаю.

import React from 'react'
import { GoogleMap } from '@react-google-maps/api';

import {defaultTheme} from './Theme'


const API_KEY_MAP = process.env.REACT_APP_API_KEY_MAP
console.log(API_KEY_MAP)

const containerStyle = {
  width: '100%',
  height: '400px'
};

const defaultOptions = {
  panControl: true,
  zoomControl: true,
  mapTypeControl: false,
  scaleControl: false,
  streetViewControl: false,
  rotateControl: false,
  clickableIcons: false,
  keyboardShortcuts: false,
  scrollwheel: false,
  disableDoubleClickZoom: true,
  fullscreenControl: false,
  styles: defaultTheme,
}

export default function Map({center} : any) {

  const mapRef = React.useRef(undefined)

  const onLoad = React.useCallback(function callback(map: any) {

    mapRef.current = map
  }, [])

  const onUnmount = React.useCallback(function callback(map: any) {
    mapRef.current = undefined
  }, [])


  return (
    <div className='_container'>
        <GoogleMap
        mapContainerStyle={containerStyle}
        center={center}
        zoom={10}
        onLoad={onLoad}
        onUnmount={onUnmount}
        options={defaultOptions}
      >
      
        <></>
      </GoogleMap>
    </div>
  )
}

Я разобрался как работать с этой штукой, но, я так и не понял, а как мне задать сразу несколько дефолтных точек.
Вот человек зашёл на сайт, и как на скрине например, он сразу видит 3 точки допустим, и чтобы фокус был на этих 3 точках, в их так сказать радиусе, какой командой это делается или как?

Answer 1

[0xD34F]

fitBounds:

// это массив ваших "точек"
const locations = [
  { lat: ..., lng: ... },
  { lat: ..., lng: ... },
  ...
];

const onLoad = map => {
  const bounds = new window.google.maps.LatLngBounds();
  locations.forEach(n => bounds.extend(n));
  map.fitBounds(bounds);
};

<GoogleMap
  onLoad={onLoad}
  ...
>
  {locations.map(n => <Marker position={n} />)}
</GoogleMap>