Marker is not draggable when change position of that

[fghorbani]

Describe the bug 🐛
Im using of custom Marker. I needed to change position of that to something like bottom, center, that was fine and my Marker is displaying at the top of my coordination, but in this case some parts of Marker are not draggable and user can drag only when click on half of that.

Expected behavior 💭
whole of the marker has to be draggable

Rec.0244.mp4

 
const Marker = (props) => 
 (
  <Box sx={{ width: '100%', height: '100vh' }}>
      <MarkerStyle>
        <img src={marker} alt="" style={{ width: '53px', height: '73px' }} />
      </MarkerStyle>
  </Box>
)

const MarkerStyle = styled(Box)`
position: absolute;
top: 100%;
left: 50%;
height: 73px;
width: 53px;
transform: translate(-50%, -100%);
&:hover {
  z-index: 1;
}
`

[jalalmanafi]

Hey, did you find any solution?

[fghorbani]

Hi @jalalmanafi, I created new Marker with google and set anchor on that. then ignore marker that I had created with google-map-react.
I did not find any solution for setting anchor in google-map-react.
you can use of this code:

const markerIcon = {
        url:img.svg',
        size: new google.maps.Size(56, 77),
        origin: new google.maps.Point(0, 0),
        anchor: new google.maps.Point(28, 77), // Adjust this value to change the anchor point
      }

      const marker = new google.maps.Marker{
        position: pointerValue,
        map: map,
        icon: markerIcon,
        draggable: true,
      })

you should update Marker to AdvancedMarkerElement.
https://developers.google.com/maps/documentation/javascript/markers

[jalalmanafi]

AdvancedMarkerElement it is not working properly