[Bug] Advanced Marker position is not correct when zooming in/out

[southxzx]

Description

I noticed that the Advanced Marker position is not correct when I try to zoom in/out. The more I zoom out the more it goes far from the position

Even though, the Marker was still working as expected when zooming in/out.

Steps to Reproduce

    <AdvancedMarker
      position={new google.maps.LatLng(10.xxxxx, 106.xxxxx)}
      clickable={true}
    >
      <div onClick={handleClick}>
        <Pin />
      </div>
    </AdvancedMarker>

Environment

• Library version: 1.4.2
• Google maps version: weekly
• Browser and Version: Latest
• OS: Mac OS

Logs

No response

[usefulthink]

Can you do me a favor and check what you can see if you add a background-color to the div in your marker?

Also, I'm not really sure what will happen with both the div AND Pin element, that's rather unusual, you should use either a Pin or some custom HTML.

[southxzx]

Sorry that I was busy and couldn't get back to you.

I removed the div element and set style for the AdvancedMarker
Looks like the blue one is the correct position I want. But why the Pin is so far away?

    <AdvancedMarker
      position={{ lat: 10.xxxxx, lng: 106.xxxxx }}
      collisionBehavior={CollisionBehavior.REQUIRED}
      anchorPoint={AdvancedMarkerAnchorPoint.BOTTOM_CENTER}
      style={{ backgroundColor: "blue" }}
    >
        <Pin />
    </AdvancedMarker>

[usefulthink]

Now that's interesting. I'll have a look.

[southxzx]

Thanks. I was able to fix it by using the html img tag instead

[usefulthink]

Using the exact same props as in your comment, I get exactly what I would expect:

I would need to be able to inspect your example more directly to understand what is happening there.