Render google maps OverlayView centered on location

Question

I need to render a button centered over a specific location, right now I'm using an OverlayView to render the button.

    <OverlayView
      position={north}
      mapPaneName={OverlayView.OVERLAY_MOUSE_TARGET}
    >
      <MapContextButton
        onClick={e => {
          e.preventDefault();
          console.log('click');
        }}
      />
    </OverlayView>

It produces the following result, rendering the overlay's top-left position on the north point. Is there a way to make it render centered on location?

score 1 · Answer 1 · answered Aug 29 '22 at 10:56

It can be done with CSS using transform: translate(-50%,-50%):

<OverlayView
             position={north}
             mapPaneName={OverlayView.OVERLAY_MOUSE_TARGET}
             >
  <MapContextButton
                    style={transform: "translate(-50%,-50%)"}
                    onClick={e => {
    e.preventDefault();
    console.log('click');
    }}
    />
</OverlayView>

score 0 · Answer 2 · answered Jun 26 '19 at 14:43

I was able to solve this by using Marker with an anchor position set for the icon

          <Marker
            position={north}
            icon={{
              url: MapContextIcon,
              anchor: new window.google.maps.Point(16, 16),
            }}
            onClick={() => {
              setIsPopoverOpen(!isPopoverOpen);
            }}
          />

Render google maps OverlayView centered on location

2 Answers2