Ember.js with a Google map in sight

Question

I am trying to display an embedded Google map based on the location of the Event object.

This is the main application:

App = Em.Application.create(); App.Event = Em.Object.extend({ lat: -33.8665433, lng: 151.1956316 }); App.EventController = Ember.ObjectController.extend(); App.ApplicationController = Ember.ObjectController.extend(); App.EventView = Ember.View.extend({ templateName: 'event' }); App.ApplicationView = Ember.View.extend({ templateName: 'application' }); App.Router = Ember.Router.extend({ enableLogging: true, root: Ember.Route.extend({ event: Ember.Route.extend({ route: '/', connectOutlets: function (router) { router.get('eventController').set('content', App.Event.create()); router.get('applicationController').connectOutlet('event'); } }) }) }); App.initialize(); 

With the following patterns:

 <script type="text/x-handlebars" data-template-name="application"> {{outlet}} </script> <script type="text/x-handlebars" data-template-name="event"> {{lat}} {{lng}} // Embeded Google Map </script> 

Where would I initialize the map? Also, if lat / lang changes, how would I catch it and redraw the map?

View working code (modified from sabithpocker answer)

 App.EventView = Ember.View.extend({ templateName: 'event', map: null, latitudeBinding: 'controller.content.lat', longitudeBinding: 'controller.content.lng', didInsertElement: function () { var mapOptions = { center: new google.maps.LatLng(this.get('latitude'), this.get('longitude')), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(this.$().get(0), mapOptions); this.set('map', map); //save for future updations this.$().css({ width: "400px", height: "400px" }); }, reRenderMap: function () { if (this.get('map')) { var newLoc = new google.maps.LatLng(this.get('latitude'), this.get('longitude')); this.get('map').setCenter(newLoc); } }.observes('latitude', 'longitude') //these are bound to lat/lng of Event }); 

Answer 1

Here is a brief idea, not the following structure of an ember application, just an idea.

 App.EventView = Ember.View.extend({ templateName: 'event', map : null, latitudeBinding : 'App.Event.lat', longitudeBinding : 'App.Evet.lng', didInsertElement : function(){ var mapOptions = { center: new google.maps.LatLng(this.get('latitude'), this.get('longitude')), zoom: 8, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(this.$().get(0),mapOptions); this.set('map',map); //save for future updations }, reRenderMap : function(){ var newLoc = new google.maps.LatLng(this.get('latitude'), this.get('longitude')); this.get('map').setCenter(newLoc) }.observes('latitude','longitude') //these are bound to lat/lng of Event }); 

I also think that App.Event should be:

 App.Event = Em.Object.extend({ lat: null, lng: null, init : function(){ this.set('lat', -33.8665433); this.set('lng', 151.1956316); } }); 

to avoid the so-called chromosomal mutation in Ember