Google Maps carica lo script API e inizializza all'interno della vista ember.js

Question

Sto provando a creare una vista ambra per Google Maps e caricare lo script in modo on-demand, ad esempio caricando in modo asincrono l'API.

Ho due funzioni all'interno della vista, una è utilizzata per caricare l'API di Google Maps e l'altra è per inizializzare la mappa. Ma dal momento che Google mi richiede di chiamare la funzione di callback tramite il link che richiede l'API. Ma in Ember.JS, non sono riuscito a ottenere il risultato giusto. Tutto quello che ho è un messaggio ERRORE che dice che l'oggetto "google" non è definito quando si tenta di inizializzare la mappa.

Ecco il codice di visualizzazione Ember per ora.

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

});

Qualche idea su come risolvere questo problema di callback? E qual è il modo ottimale per inizializzare la mappa? Dovrebbe essere nel modello o dal JS?

Grazie in anticipo.

Answer 1

Ci sono due problemi qui. Uno è che si sta chiamando la funzione initiateMaps() in questa linea:

var map_callback = this.initiateMaps(); 

Questa chiamata viene effettuata prima che l'API di Google Maps viene caricato, che porta alla errore non definito google.

L'altro problema è che map_callback è locale per questa funzione. Il callback utilizzato nell'URL dello script dell'API di Maps deve essere una funzione globale.

(avete risolto questo problema da soli, io sto solo aggiungendo qui a beneficio dei futuri visitatori.)

La correzione di entrambi questi problemi è quello di cambiare quella linea a:

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

Potrebbe esserci un modo più "nativo" per farlo, ma in ogni caso dovrebbe essere il trucco.

Inoltre, dal momento che si sta utilizzando jQuery con Ember, è possibile sostituire questo codice:

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

con:

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