A lightweight, declarative, composable API for building ambitious map UIs in your Ember apps.

• ✅ A lightweight Ember API for working with Google Maps.
• ✅ An on-demand, asynchronous loader for the Google Maps API.

• ❌ A bulky, verbose wrapper that reimplements the entire Google Maps API.
• ❌ A whitelist or option validator that is tightly coupled to Google's API.

• Ember.js v2.18 or above
• Ember CLI v3.11 or above
• Node.js v10 or above

This addon is maintained by Sander Melnikov.

If you don't need the Google API specifically, check out ember-leaflet.

Display a map centered around a set of coordinates 🗺.

{{g-map lat='51.508530' lng='-0.076132' zoom=10}}

Display an array of locations using markers 📍.

{{#g-map lat='51.508530' lng='-0.076132' zoom=10 as |g|}}
  {{#each locations as |l|}}
    {{g.marker lat=l.lat lng=l.lng onClick=(action 'showDetails' l)}}
  {{/each}}
{{/g-map}}

Display a custom overlay, like a custom HTML marker using template blocks 😱. This lets you do all sorts of fancy things, like adding CSS animations and binding data.

{{#g-map lat='51.508530' lng='-0.076132' zoom=10 as |g|}}
  {{#each rentals as |r|}}
    {{#g.overlay lat=r.lat lng=r.lng classNames='custom-marker'}}
      <div class="marker-content">
        <p class="price">{{r.price}}</p>
      </div>
    {{/g.overlay}}
  {{/each}}
{{/g-map}}

See the Contributing guide for details.

For more information on using ember-cli, visit https://ember-cli.com/.

MIT © Sander Melnikov.