Can I customize the addressControls of the StreetViewPanorama?

[minhla]

Hi everyone, I'm using the <Map> component and I want to customize the position of the address controls when the user enters Street View by dragging the stickman onto the map.

Right now I don't see any props for that in <Map>, so I want to ask here if there is any way to do that.

According to Google documents, the address controls can be customized in a StreetViewPanorama instance

  const panorama = new google.maps.StreetViewPanorama(
    document.getElementById("map") as HTMLElement,
    {
      position: { lat: 42.345573, lng: -71.098326 },
      addressControlOptions: {
        position: google.maps.ControlPosition.BOTTOM_CENTER,
      },
      linksControl: false,
      panControl: false,
      enableCloseButton: false,
    }
  );

[chama-x]

Yes, you can customize addressControls! The <StreetViewPanorama> component in react-google-maps accepts the standard Google Maps options, so you can pass addressControlOptions just like in vanilla Google Maps API:

<StreetViewPanorama
  position={position}
  options={{
    addressControlOptions: {
      position: google.maps.ControlPosition.BOTTOM_CENTER,
    },
  }}
/>

If you need more control over visibility/behavior, you can also get the panorama instance via useStreetView() hook and manipulate it directly:

const panorama = useStreetView();
if (panorama) {
  panorama.setOptions({
    addressControlOptions: { position: ... }
  });
}

You can control position, visibility, and other properties through the options object. The library passes these through to the underlying Google Maps Street View implementation.