Initial Zoom Property

[kaili-kameoka]

I've followed the instructions on the NPM package page with few modifications. The zooom property doesn't seem to be working on initial load. I can change the zoom in the code and the map will update in real time. However, when I refresh the screen, the map goes back to uts original zoom. Am I forgetting something?

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

const Map = () => {
  const { isLoaded } = useJsApiLoader({
    id: 'google-map-script',
    googleMapsApiKey: "AIzaSyAMKOoyTBaxGgdI9AuRxva9bEMd7M9e89o"
  })

  const [map, setMap] = useState(null)
  const [lat, setLat] = useState(0);
  const [long, setLong] = useState(0);
  const [errorMessage, setErrorMessage] = useState('');

  const onLoad = useCallback(function callback(map) {
    const bounds = new window.google.maps.LatLngBounds();
    map.fitBounds(bounds);
    setMap(map)

    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(position => {
        setLat(position.coords.latitude);
        setLong(position.coords.longitude);
        
      }, () => {
        setErrorMessage('We could not find your location.')
      })
    }
  }, [])

  const onUnmount = useCallback(function callback(map) {
    setMap(null)
  }, [])

  return (
    <>
      {errorMessage && (
        <Alert variant='danger'>{errorMessage}</Alert>
      )}
      {isLoaded && !errorMessage ? (
        <GoogleMap
          mapContainerStyle={containerStyle}
          center={{ lat, lng: long }}
          zoom={10}
          onLoad={onLoad}
          onUnmount={onUnmount}
        >
          { /* Child components, such as markers, info windows, etc. */ }
          <></>
        </GoogleMap>
      ) : (
        <div 
          className="d-flex justify-content-center align-items-center" 
          style={{width: 400, height: 400}}
        >
          <Spinner animation="border" role="status">
            <span className="visually-hidden">Loading...</span>
          </Spinner>
        </div>
      )}
    </>
  )
}

[EthanEFung]

The issue here has to do with the .fitBounds method and the interaction with the Map zoom prop. It's unintuitive, but if you were to pass a zoom, this would initially set the zoom for the map, but the .fitBounds method will be called on load overiding the viewport with whatever bounds that was set. It looks like you've created LatLngBounds without any lat lngs on the first line of your onLoad callback

[kaili-kameoka]

Go it. It seems like there are two ways of initializing the map: through the props or through a map object. I chose to do the props method instead and it works ok.

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

const Map = () => {
  const { isLoaded } = useJsApiLoader({
    id: 'google-map-script',
    googleMapsApiKey: "AIzaSyAMKOoyTBaxGgdI9AuRxva9bEMd7M9e89o"
  })

  const [map, setMap] = useState(null)
  const [lat, setLat] = useState(0);
  const [long, setLong] = useState(0);
  const [errorMessage, setErrorMessage] = useState('');

  const onLoad = useCallback(function callback(map) {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(position => {
        const lat = position.coords.latitude;
        const lng = position.coords.longitude
        setLat(lat);
        setLong(lng);
        // const bounds = new window.google.maps.LatLngBounds({ lat, lng, zoom: 10 });
        // map.fitBounds(bounds);
        // setMap(map)  
      }, () => {
        setErrorMessage('We could not find your location.')
      })
      
    }


  }, [])

  const onUnmount = useCallback(function callback(map) {
    setMap(null)
  }, [])

  return (
    <>
      {errorMessage && (
        <Alert variant='danger'>{errorMessage}</Alert>
      )}
      {isLoaded && !errorMessage ? (
        <GoogleMap
          mapContainerStyle={containerStyle}
          center={{ lat, lng: long }}
          zoom={13}
          onLoad={onLoad}
          onUnmount={onUnmount}
        >
          { /* Child components, such as markers, info windows, etc. */ }
          <></>
        </GoogleMap>
      ) : (
        <div 
          className="d-flex justify-content-center align-items-center" 
          style={{width: 400, height: 400}}
        >
          <Spinner animation="border" role="status">
            <span className="visually-hidden">Loading...</span>
          </Spinner>
        </div>
      )}
    </>
  )
}