Skip to content
A lightweight, declarative, composable API for building ambitious map UIs in your Ember apps.
Branch: master
Clone or download

Build Status

📍 Ember Google Maps

A lightweight, declarative, composable API for building ambitious map UIs in your Ember apps.

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.
  • A whitelist or option validator that is tightly coupled to Google's API.

📎 Documentation

View guides and documentation ›

👷‍ Maintainers

This addon is maintained by Sander Melnikov.

⭐ Features

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 lng=l.lng onClick=(action 'showDetails' l)}}

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 lng=r.lng classNames='custom-marker'}}
      <div class="marker-content">
        <p class="price">{{r.price}}</p>

Learn more ›



  • git clone this repository
  • cd ember-google-maps
  • yarn


  • yarn lint:js
  • yarn lint:js --fix

Setting up API keys

The dummy app and test suite is run using a live map instance, which means you need an API key. I do not provide API keys for testing – you need to generate your own.

You can create an API key by following the instructions here: Create API key.

Assign this key to the GOOGLE_MAPS_API_KEY variable in .env or just run these lines, making sure to replace INSERT_YOUR_KEY_HERE with your actual key.

touch .env & echo 'GOOGLE_MAPS_API_KEY=<INSERT_YOUR_KEY_HERE>' > .env cp .env .env.test

Running tests

  • ember test – Runs the test suite on the current Ember version
  • ember test --server – Runs the test suite in "watch mode"
  • ember try:each – Runs the test suite against multiple Ember versions

Running the dummy application

For more information on using ember-cli, visit


MIT © Sander Melnikov.

You can’t perform that action at this time.