Google static map component

google-static-map.js

import Ember from 'ember';
import config from 'minutebase/config/environment';

export default Ember.Component.extend({
  classNames: "google-static-map",
  tagName: "img",
  attributeBindings: ["src"],

  width:  null,
  height: null,

  zoom:   14,
  parts: null,

  center: null,

  setupParts: Ember.on("init", function() {
    this.set("parts", []);
  }),

  calculateDimensions: Ember.on("didInsertElement", function() {
    Ember.run.next(() => {
      const width  = this.$().width();
      const height = this.$().height();
      this.setProperties({ width, height });
    });
  }),

  monitorWindowSize: Ember.on("didInsertElement", function() {
    this._listener = () => Ember.run.debounce(this, "calculateDimensions", 100);
    Ember.$(window).on("resize", this._listener);
  }),

  stopMonitioringWindowSize: Ember.on("willDestroyElement", function() {
    if (this._listener) {
      Ember.$(window).off("resize", this._listener);
    }
  }),

  src: Ember.computed("center", "width", "height", "zoom", "parts.@each.params", {
    get() {
      let url = "https://maps.googleapis.com/maps/api/staticmap?";

      const {center, zoom, width, height, parts} = this.getProperties("center", "zoom", "width", "height", "parts");

      if (!center || !width || !height) {
        return;
      }

      let params = [];

      params.push(`center=${center.lat},${center.lng}`);
      params.push(`zoom=${zoom}`);
      params.push(`size=${width}x${height}`);
      params.push(`key=${config.googleKey}`);
      params = params.concat(parts.mapBy("params"));

      return url + params.join("&");
    }
  }),

  // could we do this by listening to childViews?
  register(component) {
    this.get("parts").pushObject(component);
  },

  unregister(component) {
    this.get("parts").removeObject(component);
  }

});

google-static-marker.js

import Ember from 'ember';

export default Ember.Component.extend({
  tagName: '',

  map:      null,
  position: null,
  title:    null,
  color:   'red',

  params: Ember.computed("position", "title", "color", {
    get() {
      const { position, color } = this.getProperties("position", "color");
      const { lat, lng } = position;
      return `markers=color:${color}|${lat},${lng}`;
    }
  }),

  register: Ember.on("didInsertElement", function() {
    Ember.run.next(() => { // doesn't fix it
      this.get("map").register(this);
    });
  }),

  unregister: Ember.on("willDestroyElement", function() {
    this.get("map").unregister(this);
  })

});

usage.hbs

{{#google-static-map center=address.position as |map|}}
  {{google-static-map/marker
    position=address.position
    map=map
  }}
{{/google-static-map}}