Skip to content

Instantly share code, notes, and snippets.

@kiwiupover
Forked from krisselden/google-map.js
Created August 12, 2014 13:57
Show Gist options
  • Save kiwiupover/8d758b8e194178f86ffe to your computer and use it in GitHub Desktop.
Save kiwiupover/8d758b8e194178f86ffe to your computer and use it in GitHub Desktop.
/* 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;
<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>
/* 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;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment