Google मानचित्र के साथ Ember.js

Question

मैं एक ईवेंट ऑब्जेक्ट के स्थान के आधार पर एक एम्बेडेड Google मानचित्र प्रदर्शित करने का प्रयास कर रहा हूं।

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(); 

निम्नलिखित टेम्पलेट्स के साथ

:

<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> 

मैं कहाँ मानचित्र आरंभ होगा

यह बुनियादी अनुप्रयोग है? इसके अतिरिक्त, अगर लेट/लैंग बदलता है, तो मैं इसे कैसे पकड़ूं और मानचित्र को फिर से खींचा?

कार्य कोड देखें (sabithpocker के जवाब से संशोधित)

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

यहां एक त्वरित विचार है, नहीं एंबर एप्लिकेशन संरचना के बाद, सिर्फ एक विचार है।

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

इसके अलावा मुझे लगता है कि App.Event होना चाहिए:

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

तथाकथित chromosomal mutation in Ember