Google Maps inside Ember.js

1
votes

I've successfully managed to get Google Maps rendering on my main page. I'm using the same technique 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, it doesn't render. If I change it like so, it works but takes over the base html element.

this.$().get(0) /**from this.$('#map').get(0)**/

I'm quite stumped. Thinking that the problem might be that didInsertElement was being trigger way too early (I've understood it that the entire DOM for this View will be available when this event fires), I've tried setting up a afterRender listener and triggered the map load but that fails too. I've triple checked that the div exists.

Can someone please help me with this?

2
javascriptgoogle-mapsember.js

2 Answers

1
votes

I ran the Google Maps init code from my console and found that the map did load so it seems to be an issue with how didInsertElement works with my setup. My understanding what that didInsertElement was called when the View was in the DOM but perhaps because I'm using layouts , it works differently.

I solved it by calling a separate view from within the div itself

{{#view "map"}}

and by creating a new View for the map.

var MapView = Ember.View.extend({
 /**
 Same as before
**/
});

This is just my solution that may be useful to others facing the same problem. If someone has a better solution, please add it so that I can verify and upvote it.

0
votes

The this.$() might not be available as the view might not have rendered yet. Try wrapping it in a Ember.run.next call to delay the execution in the next run loop cycle:

didInsertElement: function() {
    Ember.run.next(this, function() {
        // your code
    });
});