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 whole app.

Thanks for using the addon!

ember-google-maps has been around for years. It started as Sander Melnikov's work and is now maintained by Acorn Web Consultants, rebuilt as a modern v2 addon for Ember Octane and Polaris.

If you use it in your commercial work, or just find it useful, consider sponsoring ongoing maintenance and API costs.

Thank you! 🙌

• Documentation
  • Quick start
• Upgrading to v8
• Compatibility
• Examples
• Companion packages
• Maintainers
• Contributing
• License
• Disclaimer

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. Give your map 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 map at some coordinates.

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

5. That's it — you've drawn a map.
   Now keep reading the docs →

🚀 Upgrading to v8

v8 is a big change: the addon is now a v2 (Embroider/Vite) addon, and the old <GMap as |g|> yielded API is deprecated in favour of rendering components as direct children (shown below).

Read the Upgrading to v8 guide →

🔗 Compatibility

• Ember.js v5.12 or above
• Node.js v18 or above
• A v2-addon-capable build: Embroider or Vite

⭐ Examples

Display a map centered on a set of coordinates.

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

Display a set of locations using markers 📍. Render the components as direct children of the map. Advanced markers need a Map ID on the map — swap the placeholder for a real one.

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

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

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

Writing .gjs / .gts components? Import the components and render them directly — no name resolution needed.

import { GMap, AdvancedMarker } from 'ember-google-maps';

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

Learn more →

📦 Companion packages

• Directions — draw routes and directions on your maps. Being brought over from v7 as a separate package.
• Clustering — group nearby markers together. Coming soon.

😇 Maintainers

• Maintained by Acorn Web Consultants (David Baker).
• Originally created by Sander Melnikov.

Contributing

See the Contributing guide for details.

License

MIT © Sander Melnikov and contributors.

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.