Important

This project has been archived and is no longer maintained.
You're encouraged to fork and maintain your own version.

Thank you to everyone who contributed over the years! We almost made it to 10 years.
Most of the original Ember community has moved on to other things and so have I. I'm proud of the lasting positive impact we've had on the frontend ecosystem.

See you around!

— sandydoo

Ember Google Maps

A friendly Ember addon for working with Google Maps.

• Create and draw on your maps using Ember components.
• Automatically load the Google Maps API on demand and safely access it across your entire app.

• Documentation
  • Quick start
• Compatibility
• Examples
• Addons
• Maintainers
• Contributing
• License
• Disclaimer

Are you new to Ember? Learn how to use Ember and install addons →

Looking for a more general mapping solution? Check out ember-leaflet →.

📎 Documentation

Get started with ember-google-maps →

💨 Quick start for the impatient

1. Install the addon.

ember install ember-google-maps

2. Provide a Google Maps API key in config/environment.js. Learn how to create an API key →

'ember-google-maps': {
  key: "<GOOGLE_MAPS_API_KEY>"
}

3. Make sure your map has a size, or you’ll end up staring at a blank screen. ember-google-map is the default class for all maps.

.ember-google-map {
  width: 500px;
  height: 500px;
}

4. Draw a new map at some coordinates.

<GMap @lat="51.508530" @lng="-0.076132" />

5. Great! You’ve drawn a map.
   Now keep reading the docs →

🔗 Compatibility

• Ember.js v3.28 or above
• Ember CLI v3.28 or above
• Node.js v18 or above

⭐ Examples

Display a map centered around a set of coordinates.

<GMap @lat="51.508530" @lng="-0.076132" @zoom={{10}} />

Display an array of locations using markers 📍.

<GMap @lat="51.508530" @lng="-0.076132" @zoom={{10}} as |map|>
  {{#each this.locations as |location|}}
    <map.marker
      @lat={{location.lat}}
      @lng={{location.lng}}
      @onClick={{fn this.showDetails location}} />
  {{/each}}
</GMap>

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.

<GMap @lat="51.508530" @lng="-0.076132" @zoom={{10}} as |map|>
  {{#each this.rentals as |rental|}}
    <map.overlay @lat={{rental.lat}} @lng={{rental.lng}}>
      <div style="transform: translateX(-50%) translateY(-50%);">
        <p class="price">
          {{rental.price}}
        </p>
      </div>
    </map.overlay>
  {{/each}}
</GMap>

Learn more →

🛒 Extra addons

• MarkerClustererPlus — Add marker clustering to your maps with @googlemaps/markerclustererplus.

😇 Maintainers

This addon is maintained by Sander Melnikov.

Contributing

See the Contributing guide for details.

License

MIT © Sander Melnikov.

Disclaimer

This software is not endorsed, maintained, or supported by Google LLC.

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