[acorncom]

What this adds

AdvancedMarker can now render your own content and place it where you want. Three additions, all optional:

• Content from a <:content> block. Put your own markup inside the marker and it becomes the marker's content.
• Forwarded ...attributes. class, modifiers, and other attributes on <AdvancedMarker> land on the content wrapper.
• Anchor offsets. @anchorLeft and @anchorTop shift the content with a CSS translate — for example, to center a dot on the point.

A pre-built @content element still works. If you pass both a @content element and a <:content> block, the block wins.

Why

Until now an advanced marker showed either the default pin or a DOM element you built yourself. If you wanted to write marker content as a template, you had to build the element by hand or keep a local wrapper component. These additions let you write the content as a normal block, style it the usual way, and anchor it where you need.

How to use it

Content from a block:

<AdvancedMarker @lat={{51.5074}} @lng={{-0.1278}}>
  <:content>
    <div class="my-pin">📍</div>
  </:content>
</AdvancedMarker>

Attributes and anchoring (here, centering the content on the point):

<AdvancedMarker
  @lat={{51.5074}}
  @lng={{-0.1278}}
  @anchorLeft="-50%"
  @anchorTop="-50%"
  class="my-pin"
>
  <:content>
    <MyIcon />
  </:content>
</AdvancedMarker>

A pre-built element (unchanged):

<AdvancedMarker @lat={{51.5074}} @lng={{-0.1278}} @content={{this.iconElement}} />

Does this break anything?

No. Every change is additive. Existing <AdvancedMarker /> calls behave exactly as before: the content wrapper renders only when you pass a <:content> block, and the new arguments do nothing unless you set them.

Info windows

There is no nested marker yield. Attach an info window by pointing its @target at the marker:

<AdvancedMarker @lat={{51.5074}} @lng={{-0.1278}} as |m|>
  <InfoWindow @target={{m.mapComponent}} @isOpen={{true}} @content="Hello!" />
</AdvancedMarker>

The upgrade guide now spells this out for anyone moving off the old <marker.infoWindow> yield, which the deprecated bridge does not cover.

Tests

test-app-basic/tests/integration/components/advanced-marker-test.gjs covers block content, forwarded attributes, the anchor transform, a pre-built @content element, and an info window attached to an advanced marker via @target. The existing classic-Marker @target test covers the other marker type.

Docs

• docs-app/advanced-markers.md — sections on content, anchoring, and info windows
• docs-app/upgrading.md — a note that the per-marker <marker.infoWindow> yield is gone; use @target

🤖 Generated with Claude Code