IssueTracker

Thanks for your suggestion!

We'll be reviewing this for further consideration. Please star this issue to get updates and leave comments for additional information. Please note that starring the issue also provides our product team with valuable feedback on the importance of the issue to our customers.

Thank you so much for your feedback! Please see my comments below.

1. No way to adjust the "anchor" point of the marker

Applying transform style to the marker content shouldn't affect the marker collision feature, in fact we use the marker content to calculate the marker collision. However, the focus ring may look weird, we will look into that and see if there is a workaround.

2. The Marker doesn't snap to the pixel grid, meaning text is often blurry.

This is a really good catch! We are working on a fix for it.

3. Applying the Cursor style pointer to the default / pinElement marker.

The pointer cursor is used to indicate that something is clickable, however, a default marker is not clickable, that's why we don't apply the pointer cursor to it until the marker becomes clickable. If you really want to have the pointer cursor for the default marker, you can call marker.element.style.cursor = 'pointer';, does that work for you?

I re-examined how we were implementing 1 & the transform: translate wasn't on the topmost element of our HTML, seems to work fine once it is - which makes sense.

On 3, yeah that'll work

Hello, the team rolled out a fix for #2 to improve the clarity of rendering, could you help verify? Thanks!

Yeah - I've had a look at our storybook entries for the Advanced Marker & can see it now rounds to the nearest pixel on devicePixelRatio=1 displays & the nearest 0.5px on devicePixelRatio=2 displays which makes it look much better in most cases.

However there's potentially still an issue where a change to the content (e.g. a font loading late) can cause it to become blurry, but that may well be a browser issue (Chrome 116) rather than a map one since the translate is whole-pixel values.

It does appear to be reproducible though, so could be worth looking into (assuming you can also reproduce it).

My content is just this

<div><div class="marker-inner" style="padding-inline: 10px; background: white; border: 2px solid purple; border-radius: 5px;"><h3>This is an element that contains children</h3><p>Hopefully with this much text the blurring issue will be more obvious</p></div></div>

I've attached a video where you can see it becoming blurry due to a font shift - then another refresh where I first visit another storybook entry (which is loading the font, presumably) where it doesn't become blurry.

At first glance, I thought this could be related to https://bugs.chromium.org/p/chromium/issues/detail?id=521364, basically, after appying CSS transform, the computed pixel position is not snapped to the pixel grid, so I tried to extract the pixel values from the CSS transform and round them, but they don't work as expected. So this does seems to be a rendering issue with the text. And then I found an interesting solution, that is to adjust the display of the marker element to 'table', which somehow forces rounding the sub-pixels of the text, see the jsfiddle here: https://jsfiddle.net/6tqzbnx9/5/.

We still need to find the root cause and a better solution, but please let me know if it's still a blocker for you to adopt Advanced Marker API :)

That table trick is interesting, must cause the element to be re-rasterised properly for some reason.

On the blocking - we wanted to use the gmp-click event (since setting regular click resulted in a warning) but that's only available in v=beta and that doesn't match up with our timeline for this project + the above blurring issue.

So we've gone for regular markers with images this time, which is a bit of a shame since I was hoping to use the advanced markers to get a bit of animation in.

When the next project kicks off we'll re-evaluate the advanced markers again & switch if they're fully stable

Hello, to align the content center to the latlng position, you can simply do:

advancedMarkerElement.content.style.transform = 'translateY(50%)';

I finally got to try it (after noticing deprecation) - and spent a while trying to find out why it renders SVG-s suspiciously blurry. It wasn't a pixel boundary issue. Old Marker with canvas was fine. Until I noticed a CSS property that is added to every market-view element:

will-change: transform

Disabling that, fixed the rendering. https://developer.mozilla.org/en-US/docs/Web/CSS/will-change suggests avoiding it.

"Be aware, that will-change may actually influence the visual appearance of elements, when used with property values"