ember install ember-google-maps
Loading Google Maps

You can configure the options used for loading the Google Maps SDK in your app's config/environment.js. Only the key option is required, however, from first-hand experience, I would suggest explicitly setting the language and version to avoid any nasty surprises.

During the build process, these options will be used to generate the url to load the SDK, which will then be lazily loaded on-demand. No render-blocking script tags on every page. No jQuery. 👌

ENV['ember-google-maps'] = {
  key: process.env.GOOGLE_MAPS_API_KEY, // Using .env files in this example
  language: 'en',
  region: 'GB',
  protocol: 'https',
  version: '3.35',
  libraries: ['geometry', 'places'], // Optional libraries
  // client: undefined,
  // channel: undefined,
  // baseUrl: '//'

Complex Ember apps can eventually become quite heavy and part of that bloat comes from the addon ecosystem. Everyone's needs are different and it's unlikely you'll use every single component in this addon. Without proper treeshaking support at build time, your builds end up full of stuff you never needed or, even worse, code you don't even know about!

In your ember-cli-build.js, you can specify which components to include or exclude from the build using only and except.

Warning This is an advanced feature and may break your app. Manually excluding components from your build can be quite finicky and time-consuming. Use at your own peril.

const EmberApp = require('ember-cli/lib/broccoli/ember-app');

module.exports = function(defaults) {
  let app = new EmberApp(defaults, {
    'ember-google-maps': {
      only: ['marker', 'info-window']
      // except: ['overlay']

  return app.toTree();
Performance issues

This addon relies heavily on Ember components. Components are what makes this addon simple and enjoyable to use. However, they come at a cost. Each component brings a bit of overhead that can eventually pile up into a heafty setup cost. Normally, this should not be an issue, apart from some extreme use-cases. If you intend to display thousands of markers, you should aim to create them in Javascript, or consider displaying fewer markers in the first place.

That's it. You're now ready to create a map.

Map ›