I had an issue with centering the AdvancedMarkerElement in this question: Draw AdvancedMarkerElement on center of its position

The solution worked, but only for the marker itself. But when focused, the marker draws a frame around the original (non-transformed) position of the marker.

I am using Firefox.

My code is:

export const HANDLE_ICON =
  '<svg xmlns="http://www.w3.org/2000/svg" transform="translate(0 8)" height="16px" viewBox="0 -960 960 960" width="16px" fill="#000"><path d="M214-74q-59.12 0-99.56-40.44Q74-154.88 74-214v-532q0-59.13 40.44-99.56Q154.88-886 214-886h532q59.13 0 99.56 40.44Q886-805.13 886-746v532q0 59.12-40.44 99.56Q805.13-74 746-74H214Z"/>  </svg>';

private renderMarker(curr: Point): google.maps.marker.AdvancedMarkerElement {
    // Custom Shape
    const pinSvg = this.parser.parseFromString(
      HANDLE_ICON, 
      "image/svg+xml"
    ).documentElement;

    // Create
    const marker = new google.maps.marker.AdvancedMarkerElement({
      map: this.map as google.maps.Map,
      position: curr.latlng,
      content: pinSvg,
      gmpDraggable: true,
      gmpClickable: true,
    });
}

I don’t really see why it would be drawn.
I can’t specify it to not draw the frame via Google Maps API.
I will download another browser to see if it is not shown there, but I do need this to work in all browsers of course.

Thank you for any help.