5.0.0 • Public • Published


Drawing and measurement tools for a Google Map

npm version Build Status Coverage Status Ember Observer Score

Preview Demo


  • Ember.js v3.16 or above
  • Ember CLI v2.13 or above
  • Node.js v10 or above


ember install google-maps-markup
<GoogleMapsMarkup @map={{}} />

Available Attributes

  • map - REQUIRED; Google Map instance, defaults to undefined. Bring your own map!
  • editable - (experimental) Allow shapes to be edited. Defaults to false.
  • panForOffscreen - On hover pan to shape if not in view (reset to last bounds after). Defaults to true.
  • autoResetToPan - After drawing a shape the tool changes to "Pan" instead of staying on the current tool. Defaults to false.


  • afterAddFeature - Fires after finishing some markup on the map. Passes the result as the first argument, i.e. afterAddFeature(result) {}.
  • afterClearResults - Fires after clicking "Clear" for a mode. Passes the mode as the first argument, i.e afterClearResults(mode) {}.


The service is called markupData and allows access to the result data that gets created when you create markup on the map. It also has some helper functions.

import Component from '@glimmer/component';

export default class MyComponent extends Component {


  • layers - Array of Google Maps Data layers, one for draw and one for measure.
  • results - Markup data for each markup you create, based on mode. See markupResults for all results.
  • markupResults - The object of all the results, no matter the mode.
  • mode - The drawing mode, either 'draw' or 'measure'.


  • activate - Add all layers to the map. activate(map).
  • changeModeByResults - Changes the mode to the first layer with results.
  • featureToResult - Converts a Google Maps Data Feature to a markup result, for loading data without actually drawing on the map (ie, load via url). featureToResult(feature, layer).


  • git clone this repository
  • yarn


  • npm run lint:js
  • npm run lint:js -- --fix

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 developing locally with your app, you can use DEVELOPING=true npm start for your app, and npm link path/to/this/addon and your app will automatically rebuild as you make changes to your local version of this addon.

For more information on using ember-cli, visit

Github Pages/Demo

Build by checking out the relevant branch, since the test dummy app is actually the demo app.

Run the following command:

ember github-pages:commit --message <message describing demo release>

For more information on using ember-cli, visit


See the Contributing guide for details.


This project is licensed under the MIT License.


npm i google-maps-markup

DownloadsWeekly Downloads






Unpacked Size

107 kB

Total Files


Last publish


  • knownasilya