Как использовать fitbounds() для центрирования и отображения всех маркеров в реакции

Question

Я новичок в реагировании и пытаюсь использовать circle() и fitbounds(), чтобы все мои маркеры отображались на экране. Прямо сейчас только первый маркер показывает на экране, но когда я уменьшаю масштаб, я вижу остальные. Однако я хочу, чтобы все маркеры отображались при запуске приложения. Помощь будет отличной! Я попытался использовать /global google/, а затем объявил константные границы, в которых хранится google.maps.latLngBounds(), но он дал мне ошибку ссылки о том, что google не определен. Я создал const, который взял окно Google, но ошибка остается. Так как я не знаю много о реакции, я не уверен, где я иду не так.

Кроме того, фрагмент кода нуждается в API_KEY в URL для запуска, когда я удалил свой ключ API.

/*global google*/
//Declaring the imports

import React, { Component } from 'react';
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from "react- 
google-maps";`enter code here`
import { Circle } from "react-google-maps";

//The bounds give me a google not defined error 
//const google = window.google;
//const bounds = new google.maps.LatLngBounds();



const MyMapComponent = withScriptjs(withGoogleMap((props) =>

//Creating the GoogleMap instance tag that takes a default zoom and uses only one center
<GoogleMap
    defaultZoom={13}
    center={{ lat: 35.8592, lng: -78.5921 }}
>
    {}
    {props.isMarkerShown &&
        props.markers.map((marker, index) => {

               //MarkerOptions
                return (
                    <Marker
                        position={marker}
                        title="Click to zoom"
                        label={"" + ((index + 1))}
                        onClick={props.onMarkerClick}
                    />
                )
        })
    }
</GoogleMap>
))


const numbers = [1, 2, 3, 4, 5];

const listItems = numbers.map((number) =>
    <li>{number}</li>
)

//The three markers being placed
const storeLocations = [
 { "lat": 35.8592, "lng": -78.5921 },
 { "lat": 35.8964, "lng": -78.5734 },
 { "lat": 35.8794, "lng": -78.5693 }
]

export default class MapComponent extends Component {

state = {
    isMarkerShown: false,
    selectedMarkerNumber: 0
}

componentDidMount() {
    this.setState({ isMarkerShown: true })
}

delayedShowMarker = () => {
    setTimeout(() => {
        this.setState({ isMarkerShown: true })
    }, 3000)
}

animatePin() {

    const min = 1;
    const max = 4;
    const rand = min + Math.floor(Math.random() * (max - min));
    console.log("rand" + rand)

    this.setState({
        selectedMarkerNumber: rand
    })
}

//Render function
render() {
    return (
        <div>
            <MyMapComponent
                isMarkerShown={this.state.isMarkerShown}
                googleMapURL="https://maps.googleapis.com/maps/api/js?key=<API_KEY>&v=3.exp&libraries=geometry,drawing,places"
                loadingElement={<div style={{ height: `100%` }} />}
                containerElement={<div style={{ height: `250px` }} />}
                mapElement={<div style={{ height: `100%` }} />}
                onMarkerClick={this.handleMarkerClick}
                markers={storeLocations}
            />
            <div className="item" color="green" onClick={() => this.animatePin()}>
                <ul>{listItems}</ul>
            </div>
        </div>
        )

    }

}