google-map.js

/* global google */
var GoogleMapComponent = Ember.Component.extend({
  places: [],
  width: 500,
  height: 500,

  attributeBindings: ['style'],

  style: function () {
    return 'width:'+this.width+'px; height:'+this.height+'px';
  }.property('width', 'height'),

  didInsertElement: function () {
    var seattle = new google.maps.LatLng(47.6097,-122.3331);
    this.map = new google.maps.Map(this.get('element'), {
      center: seattle,
      zoom: 15
    });

    this.infowindow = new google.maps.InfoWindow();

    this.markers = [];

    var places = this.places;
    this.arrayDidChange(places, 0, 0, places.length);
  },

  willDestroyElement: function () {
    this.map = null; // google maps doesn't have an unload
    this.markers = null;
    this.infowindow = null;
  },

  createMarker: function (place) {
    var map = this.map;
    var infowindow = this.infowindow;
    var placeLoc = place.geometry.location;
    var marker = new google.maps.Marker({
      map: map,
      position: place.geometry.location
    });

    google.maps.event.addListener(marker, 'click', function() {
      infowindow.setContent(place.name);
      infowindow.open(map, this);
    });

    return marker;
  },

  placesWillChange: function () {
    var places = this.places;
    places.removeArrayObserver(this);
    this.arrayWillChange(places, 0, places.length, 0);
  }.observesBefore('places'),

  placesDidChange: function () {
    var places = this.places;
    places.addArrayObserver(this);
    this.arrayDidChange(places, 0, 0, places.length);
  }.observes('places').on('init'),

  arrayWillChange: function (places, start, removeCount, addCount) {
    if (this.map) {
      var removed = this.markers.splice(start, removeCount);
      for (var i=0; i<removed.length; i++) {
        removed[i].setMap(null);
      }
    }
  },

  arrayDidChange: function (places, start, removeCount, addCount) {
    if (this.map) {
      var l = start + addCount;
      for (var i=start; i<l; i++) {
        this.markers[i] = this.createMarker(places[i]);
      }
    }
  }
});

export default GoogleMapComponent;

places.hbs

<form {{action "find" on="submit"}}>

{{input value=keyword}} <button type="submit">Find</button>

</form>

{{google-map places=results}}

<ul>
{{#each results}}
  <li>{{name}} {{vicinity}}</li>
{{/each}}
</ul>

places.js

/* global google */
var PlacesController = Ember.Controller.extend({
  actions: {
    find: function () {
      var service = new google.maps.places.PlacesService(attributions);
      var seattle = new google.maps.LatLng(47.6097,-122.3331);
      var request = {
        location: seattle,
        radius: '500',
        keyword: this.keyword
      };
      var self = this;
      function callback(results, status) {
        if (status === google.maps.places.PlacesServiceStatus.OK) {
          Ember.run(self, 'set', 'results', results);
        }
      }
      service.nearbySearch(request, callback);
    }
  },
  keyword: '',
  results: []
});

var attributions = document.createElement('div');
document.body.appendChild(attributions);

export default PlacesController;