I have successfully implemented Google Maps on my main page and now I am trying to do the same for one of my inner pages.
var MapView = Ember.View.extend({
layoutName: 'pagelayout',
didInsertElement : function(){
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(this.$("#map").get(0),mapOptions);
this.set('map',map);
},
redrawMap : function(){
var newLoc = new google.maps.LatLng(this.get('latitude'), this.get('longitude'));
this.get('map').setCenter(newLoc)
}.observes('latitude','longitude')
});
However, the map is not rendering on the inner page. If I make a slight change as shown above, it works but takes over the base html element inappropriately.
this.$().get(0) /**from this.$('#map').get(0)**/
I am struggling to figure out the issue. I considered that maybe the didInsertElement event was being triggered too early, even though I thought the entire DOM would be available by then for this View. I tried setting up an afterRender listener and triggering the map load, but that also failed. I have confirmed multiple times that the div exists.
Could someone assist me with solving this problem?