Marker Icon Misalignment with Custom SVG Path in @react-google-maps/api

[m-alhoomaidi]

An explanation of the issue

When utilizing a custom SVG path for a marker icon with the Marker component in @react-google-maps/api, there's a significant misalignment between the intended click location on the map and where the marker is actually rendered. This issue impacts the precision of marker placement, which is essential for user interactions within our application.

Environment

os: linux

node --version 21.5.0

react version 18.2.0

@react-google-maps/api version:^2.19.3

How does it behave?

Currently, when using a custom SVG path as an icon for the Marker component, the marker does not align correctly with the specified coordinates on the map. Despite the position prop being set accurately according to the location where the map is clicked, the rendered marker appears offset from this location. This behavior is consistent across various browsers and zoom levels on the map. The discrepancy between the click location and the marker's position creates confusion, as the visual indication of the marker does not match the expected geographical point on the map.

How should it behave correctly?

The marker should be rendered precisely at the coordinates specified by the position prop, with no visible offset or misalignment. When a user clicks on a specific point on the map, and a marker is programmatically placed at this point using a custom SVG icon, the tip of the marker icon (or its designated anchor point) should coincide exactly with the clicked location. This behavior would ensure that the visual representation provided by the marker accurately reflects the intended geographical location, enhancing the user experience by providing clear and accurate visual cues.

[liannguyenrapp]

I've got the same issue this morning, it's turned out, that there's an option to set the icon position.
Take a look at my example

<MarkerF
                    key={it.id}
                    position={it}
                    draggable={false}
                    clusterer={clusterer}
                    icon={{
                      url: '/svg/marker-icon.svg',
                      anchor: new google.maps.Point(22, 22),
                    }}
/>

The point is this line anchor: new google.maps.Point(22, 22),

22,22 is the center of the svg.