ember-google-maps

Appearance

Creating advanced markers ​

The Advanced Marker is Google's successor to the legacy Marker. To use advanced markers, the map needs a Map ID. Legacy styling with styles is disabled once the map has one.

You can create an advanced marker with the AdvancedMarker component. As with GMap and Marker, you can set its position with either @lat and @lng, or @position.

Every argument you pass to AdvancedMarker is passed straight through as an option, the same as Marker.

TIP

Remember these are Google Maps events, not Ember events — see Events for how the @on* convention works.

WARNING

The live demo below passes a placeholder @mapId — DEMO_MAP_ID isn't tied to a real Google Cloud project. Advanced markers still render fine with a placeholder (Google falls back to the default pin styling), so the demo below works end to end. What you won't get without a real Map ID is any of the cloud-based styling — custom colors, icons, and so on, configured in the Google Cloud Console. Swap in a Map ID from your own project to use that.

hbs
<GMap @lat={{51.5074}} @lng={{-0.1278}} @zoom={{12}} @mapId="DEMO_MAP_ID">
  {{! DEMO_MAP_ID is a placeholder — swap in a real Google Cloud Map ID for cloud-based marker styling }}
  <AdvancedMarker
    @lat={{51.5074}}
    @lng={{-0.1278}}
    @gmpDraggable={{false}}
    @onClick={{this.onMarkerClick}}
  />
</GMap>

Custom content ​

An advanced marker can render your own DOM instead of the default pin. Pass a <:content> block:

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

...attributes are forwarded to the content wrapper, so class and modifiers work as usual:

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

If you already have a built element, pass it as @content instead (a <:content> block takes precedence over @content):

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

Anchoring ​

By default an advanced marker anchors its content's bottom-center at the position (like a pin). Use @anchorLeft/@anchorTop — CSS offsets applied as a translate on the content wrapper — to re-anchor. For example, to center the content on the point:

hbs
<AdvancedMarker
  @lat={{51.5074}}
  @lng={{-0.1278}}
  @anchorLeft="-50%"
  @anchorTop="-50%"
>
  <:content>
    <div class="dot"></div>
  </:content>
</AdvancedMarker>

Info windows ​

Attach an info window to an advanced marker by pointing the info window's @target at the marker (see Info windows):

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

Example ​

Click on a marker to find out its coordinates.