Ember Google Maps

A friendly Ember addon for working with Google Maps.

What this addon is:

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

What this addon is not:

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

📎 Documentation

View guide and documentation ↗️

🔗 Compatibility

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

⭐ Features

Feature
Lightweight wrapper	✅
Async API loading	✅
Official Google API	✅
Leverages templates	✅
Contextual components	✅
Minimal observer usage	✅
Native Ember HTML markers	✅

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

Examples of what to expect

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}}

Learn more ↗️

👷 Maintainers

This addon is maintained by Sander Melnikov.

Contributing

See the Contributing guide for details.

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

License

MIT © Sander Melnikov.

Disclaimer

This software and its maintainer are in no way affiliated, endorsed, maintained, or supported by Google LLC.

©2020 Google LLC All rights reserved. Google Maps™ is a trademark of Google LLC.