How can I make my popup appear fully visible on Google map with React?

What I’m doing:

1. I’m using @react-google-maps/api with React, rendering some markers + popup div.
2. I’m using OverlayView for the markers on the map.
3. When I click a pin – I show an info div for that pin.
4. The info popup div is currently a Box element from ChakraUI, that can change if need be. But it shouldn’t make any difference.

What I would like:

• I want to ensure that the popup div is fully visible, not cut off, depending on the position of the map relative to its bounds.

I would be happy to have either of the following:

• Move the map so the info window is fully visible.
• Position the info window differently so that it’s fully visible.

I’ve not had any success yet, just can’t find a way to do it. Any help would be appreciated.

Here’s the React markup, showing how I’m rending the marker with the price, and the info popup

  return (
    <>
      <OverlayView position={props.position} mapPaneName={OverlayView.OVERLAY_MOUSE_TARGET}>
        <Box>
          <Card                      
            id={`marker-${props.markerIndex}`}
            border={'1px solid rgb(221, 222, 224)'}
            borderRadius={'24px'} 
            width={'max-content'}  
            onClick={props.onClick}  
            color={ (props.isSelected || props.isHoveringResult) ? 'white': 'black' }     
            backgroundColor={ (props.isSelected  || props.isHoveringResult) ? 'black': 'white' }>
            <CardBody padding={'8px'} textAlign={'center'}> 
              <Text fontSize={'14px'} fontWeight={'bold'}>
                {priceStr}
              </Text>
            </CardBody>
          </Card>


          {/* Desktop display item sticks to map and moves. */}
          { props.isSelected && 
            <Box 
              id={`markerPopup-${props.markerIndex}`}
              onClick={() => {
                event.stopImmediatePropagation();
              }}
              width={{ base: '100%', sm: '400px'}}
              position={'relative'} marginTop={'16px'}
              zIndex={'tooltip'}>
              <HotelSearchResultDisplayMapItem />
              <Box pos={'absolute'} right="8px" top="8px" cursor={'pointer'}>
                <FontAwesomeIcon             
                icon={solidCircleXMark} 
                size='3x'
                color='white'
                />
              </Box>         
            </Box>
          }        
        </Box>
      </OverlayView>
    </>
  );

Here’s what it looks like so far:

You can see that because my marker is lower down, the popup is cut-off.