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:  Ember.computed(function() {
    return this.element && this.$().width();
  }).volatile(),
  
  height: Ember.computed(function() {
    return this.element && this.$().height();
  }).volatile(),

  zoom:   14,
  parts: null,

  center: null,

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

  didInsertElement() {
    this.refreshSrc();
  },
  
  refreshSrc() {
    this.notifyPropertyChange('src');
  },

  monitorWindowSize: Ember.on("didInsertElement", function() {
    this._listener = () => Ember.run.debounce(this, "refreshSrc", 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", "[email protected]", {
    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("&");
    }
  }),

  register(component) {
    Ember.run.next(() => this.get("parts").pushObject(component) );
  },

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

});