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;

Hi @krisselden,

I tried this code and after few modifications it worked except one thing, when there is any change in data I want it to be reflected in Map,

long story short, lines below is having issues, the markers returns me Promise objects, which does not let me to call setMap(null) function on it.

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);
}
}
},

Promise
_id: 249
_label: undefined
result: Zh
e3: Object
**gm: Object
anchorPoint: U
changed: (a)
clickable: true
closure_uid_641369847: 42
gm_accessors: Object
gm_bindings: Object
icon: Object
info_window_number: 54
internalPosition: wf
map: ll
position: wf
tg: Object
title: "54"
visible: true
zIndex: 500
__proto**: c
_state: 1
_subscribers: Array[0]
proto: Promise

Any idea how to solve this issue?

Solved.
Using
promise.then (marker) ->
marker.setMap(null)
fixed the issue.