Google Maps ładuje skrypt API i inicjuje wewnątrz widoku ember.js.

Question

Próbuję utworzyć widok Ember dla Google Maps i załadować skrypt na żądanie, tj. Asynchronicznie ładować interfejs API.

Mam dwie funkcje wewnątrz widoku, jedna służy do wczytywania interfejsu API Map Google, a druga służy do inicjowania mapy. Ale ponieważ Google wymaga ode mnie wywołania funkcji zwrotnej za pomocą linku, który wymaga interfejsu API. Ale w Ember.JS nie mogłem uzyskać właściwego rezultatu. Wszystko, co mam, to komunikat o błędzie informujący, że obiekt "google" jest niezdefiniowany podczas próby zainicjowania mapy.

Oto kod widoku Ember na teraz.

App.MapsView = Ember.View.extend({ 

templateName: 'maps', 
map: null, 

didInsertElement: function() { 
    this._super(); 
    this.loadGoogleMapsScript(); 
}, 

initiateMaps:function(){ 
    var mapOptions = { 
     zoom: 8, 
     center: new google.maps.LatLng(-34.397, 150.644), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    var map = new google.maps.Map(this.$().get(0), mapOptions); 
    this.set('map',map); 
}, 

loadGoogleMapsScript: function(){ 
    var map_callback = this.initiateMaps(); 

    var script = document.createElement('script'); 
    script.type = 'text/javascript'; 
    script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=map_callback'; 
    document.body.appendChild(script); 
}, 

});

Jakieś pomysły na rozwiązanie tego problemu zwrotnego? I jaki jest optymalny sposób na zainicjowanie mapy? Czy powinien znajdować się w szablonie, czy w JS?

Z góry dziękuję.

Answer 1

Występują tutaj dwa problemy. Jednym z nich jest, że jesteś nazywając swoją funkcję initiateMaps() w tej linii:

var map_callback = this.initiateMaps(); 

To połączenie jest wykonane, zanim zostanie załadowany Maps API, co prowadzi do nieokreślonej google błędu.

Innym problemem jest to, że map_callback jest lokalne dla tej funkcji. Połączenie zwrotne używane w adresie URL skryptu API Map API musi być funkcją globalną.

(Ty sam rozwiązał ten problem, ja jestem po prostu dodanie go tutaj dla dobra przyszłych odwiedzających.)

Rozwiązaniem dla obu tych problemów jest to, aby zmienić tę linię do:

var self = this; 
window.map_callback = function() { 
    self.initiateMaps(); 
} 

Może istnieć bardziej "natywny" sposób Ember, ale w każdym razie powinno to wystarczyć.

Ponadto, ponieważ używasz jQuery wraz z Cienia, można zastąpić ten kod:

var script = document.createElement('script'); 
script.type = 'text/javascript'; 
script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=map_callback'; 
document.body.appendChild(script); 

z:

$.getScript('https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&callback=map_callback');