Skip to content

Creating markers

WARNING

Google has deprecated the legacy Marker as of February 21st, 2024 (Maps JavaScript API v3.56). It still works today, but you're encouraged to switch to the new AdvancedMarker when you can.

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

Every argument you pass to Marker is passed straight through as an option, the same as GMap. Events work the same way too.

TIP

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

hbs
<GMap @lat={{51.5074}} @lng={{-0.1278}} @zoom={{12}}>
  <Marker @lat={{51.5074}} @lng={{-0.1278}} @onClick={{this.onMarkerClick}} />
</GMap>

Example

Click on a marker to find out its coordinates.