StreetViewPanorama won't show on a standalone page in react-google-map-api

[iamhammyboi19]

Issue template

You can donate or became a sponsor https://opencollective.com/react-google-maps-api#category-CONTRIBUTE

If you want to ask question, please ask it in Github Discussions, Spectrum.chat or Slack channel

Please do not post unformatted code into issues, and please do not ask questions. Only real issues, PR's or feature requests are allowed. Minimal reproduction in codesandbox.io is required.

Help wanted

As mentioned in this issue, the author of this project will only accept issues with codesandbox reproduction and PR with solution going forward.

Please provide an explanation of the issue

Your Environment

os: mac

node v22.11.0

react v18.2.0

vite v4.4.5

@react-google-maps/api v2.20.3

How does it behave?

StreetViewPanorama won't render when I try to load it from a new page using searchParams for the url http://localhost:5173/viewmap?lat=7.3953418&lng=3.9284954 it will just load the google map only. When I search address with usePlaceAutoComplete inside the same component it displays the StreetViewPanorama. But when I get the lat and lng as url query for the new page to show the StreetViewPanorama and try to render it on the new page it will just only show me the normal google map without displaying StreetViewPanorama as expected

const { isLoaded } = useJsApiLoader({
    id: "google-map-script",
  });

  // eslint-disable-next-line no-unused-vars
  const [searchParams, setSearchParams] = useSearchParams();

  const lat = Number(searchParams.get("lat"));
  const lng = Number(searchParams.get("lng"));
  const center = { lat, lng };

  return (
    <div>
      <>
        {isLoaded && lat && lng ? (
          <GoogleMap
            mapContainerStyle={containerStyle}
            zoom={12}
            center={center}
          >
            <StreetViewPanorama
              containerStyle={containerStyle}
              zoom={12}
              position={center}
              visible={true}
            />
          </GoogleMap>
        ) : (
          <></>
        )}
      </>
    </div>
  );
}

How should it behave correctly?

It should display StreetViewPanorama directly on a new page

Basic implementation of incorrect behavior in codesandbox.com

[mightym]

I'm having the same issue. I assumed I could use the StreetViewPanorama standalone outside of a map. In my usecase I have a split view, on the left the Map and on the right the Streetview.

[iamhammyboi19]

I solved it creating a StreetViewPanorama with new window.google.maps.StreetViewPanorama and linked a ref to an empty div. I saw this on chatgpt

  const streetViewRef = useRef(null);
  const onLoad = useCallback(
    (map) => {
      const panorama = new window.google.maps.StreetViewPanorama(
        streetViewRef.current,
        { position: center }
      );

      panorama.setVisible(true);

      map.setStreetView(panorama);
    },
    [setSearchParams]
  );
  
  // inside jsx
  <div ref={streetViewRef} style={streetViewContainerStyle}></div>