Перемещение гугл карты по маркеру

Question

Я хочу переместить карту Google в соответствии с маркером. Я установил defaultCenter, но когда я получил свою текущую позицию с широтой и маркером lng, он перемещается правильно, но карта Google не движется в соответствии с маркером.

Вот код

import { GoogleMap, withScriptjs, withGoogleMap, Marker } from "react-google-maps";
import { useSelector } from 'react-redux';

function Map(props) {
    const { latitude, longitude } = useSelector(state => state.location);
    const [current, setCurrent] = React.useState({ lat: 42.360081, lng: 7.665440 });


    return (
        <GoogleMap defaultZoom={4}
            defaultCenter={{ lat: (latitude ? latitude : current.lat), lng: (longitude ? longitude : current.lng) }}
        >
            {props.isMarkerShown && <Marker position={{ lat: (latitude ? latitude : current.lat), lng: (longitude ? longitude : current.lng) }} />}
        </GoogleMap>
    )
}


const WrappedMap = withScriptjs(withGoogleMap(Map));

const App = () => {
    return (
        <WrappedMap
            isMarkerShown={true}
            googleMapURL={`https://maps.google.com/maps/api/js?key=[API_KEY]-e2c2H2jAcFw`}
            loadingElement={<div style={{ height: `100%` }} />}
            containerElement={<div style={{ height: `75vh` }} />}
            mapElement={<div style={{ height: `100%` }} />}
        />
    )
}

export default App;

Answer 1

Попробуйте присвоить new window.google.maps.Map переменной map, а затем добавьте setMarker(createMarker(map)) в функцию createGoogleMap.

Теперь маркер помещается на карту, и карта центрируется на ее позиции, потому что вы добавили те же координаты.

См. Код ниже:

googleMapScript.addEventListener("load", () => {
    setGoogleMap(createGoogleMap());
});

...

let createGoogleMap = () => {
    const map = new window.google.maps.Map(googleMapRef.current, {
        zoom: 16,
        center: {
            lat: 43.642567,
            lng: -79.387054,
        },
        // disableDefaultUI: true,
    });

    setMarker(createMarker(map));
}


let createMarker = (map) => {
    const marker = new window.google.maps.Marker({
        position: { lat: 43.642567, lng: -79.387054 },
        map: map,
    })
    return marker
}

Снимок экрана:

Надеюсь, это поможет!