Why does this exist?

Working with the Google Maps API can be a pain. Even for the simplest of mapping needs, you end up writing a bunch of JavaScript tailored to your problem and pray you’ll never have to look at it again. Attempt to manage complex map state this way and I guarantee you’ll produce one flavour or another of spaghetti code. This addon is proof that it doesn’t have to be that way. We can leverage handlebars templates and Ember components to create a dead simple API to manage maps and markers without having to touch JavaScript in most cases.

ember-google-maps tries to satisfy 3 main criteria:

  1. Lightweight
  2. Declarative
  3. Composable

The main star of the show is the mapping library you want to use. An addon like this should help integrate that library into the ember framework. Too often you see addons in ember and react essentially reimplementing the entire mapping library’s API just to shim the functionality into the framework. This always results in a needlessly bloated and tightly coupled addon.

This addon sets a few groundrules on how to define options and events and seamlessly passes them to the mapping library – no explicit mapping, munging or asserting.


90% of your mapping needs can be satisfied with just a few lines of handlebars and some actions. By using the ember tools we love so much, you can stop worrying about managing map state in JavaScript, and focus on building your application. This is especially true for the more complex features, like custom HTML markers!


Contextual components make it easy to create and build up your map. Together with the basic {{each}} and {{if}} helpers, you can create the bulk of your mapping logic without a drop of JavaScript.

Getting started ›