Comment charger l’API Google Maps avec RequireJS?

J’ai réussi à régler le problème avec le plugin async .

Un exemple rapide est:

 require.config({ paths: { 'async': 'lib/requirejs-plugins/src/async' } }); define(['async!http://maps.google.com/maps/api/js?sensor=false'], function() { // Google Maps API and all its dependencies will be loaded here. }); 

Merci à user1706254 de provoquer la documentation officielle: https://github.com/millermedeiros/requirejs-plugins/ utilisait le mot clé ‘define’ qui ne fonctionnait pas pour moi mais ‘require’ fonctionne correctement.

Je ne pouvais pas charger directement:

 require(["goog!maps,3,other_params:sensor=false"], function(){}); 

Mais en utilisant la méthode asynchrone a fait l’affaire:

 require(['async!http://maps.google.com/maps/api/js?sensor=false'], function(){}); 

Après Hjuster, voici un exemple rapide d’utilisation du plugin async

https://gist.github.com/millermedeiros/882682

Il y a aussi le plugin goog (nécessite async et propertyParser), disponible sur github

Exemple d’utilisation pour Google Maps:

 require(["goog!maps,3,other_params:sensor=false"], function(){}); 

Vous n’avez pas besoin du plug-in asynchrone pour utiliser Google Maps avec require.js. Le but peut être atteint en utilisant uniquement une simple configuration de cale :

 require.config({ paths: { gmaps: '//maps.googleapis.com/maps/api/js?' // question mark is appended to prevent require.js from adding a .js suffix }, shim: { gmaps: { exports: 'google.maps' } } }); require(['gmaps'], function (gmaps) { var center = {lat: -34.397, lng: 150.644}; var map = new gmaps.Map(document.getElementById('map'), { center: center, zoom: 8 }); new gmaps.Marker({ map: map, position: center }); }); 

La réponse de @ hjuster m’a guidé et j’ai résolu par une fonction de rappel .

 define(['async!http://maps.google.com/maps/api/js?key=YOURKEY!callback'], function (_ExpectedMap) { callback(); }); 

Notez que le rappel à la fin de l’URL commence par async! , la méthode de rappel est appelée lorsque l’opération de chargement est effectuée.

 function callback() { //Now load google maps API dependant libraries require(['gmapsLib'], function (googlemaps) { window.GMaps = googlemaps; } } 

Il y a une autre question que j’ai remarquée récemment, une autre fonction (onLoad) est utilisée à la place du rappel pour éviter les erreurs de dépassement de délai. Intéressant.

Impossible de faire fonctionner les plugins pour une raison quelconque, mais cette solution de contournement a sauvé ma journée:

  require(['https://apis.google.com/js/client.js?onload=doNothing'], function() { // Poll until gapi is ready function checkGAPI() { if (gapi && gapi.client) { self.init(); } else { setTimeout(checkGAPI, 100); } } checkGAPI(); }); }); 

Il suffit de vérifier si le gapi est prêt tous les 100 millisecondes, jusqu’à ce qu’il soit finalement chargé.

J’ai trouvé le code dans cet article http://dailyjs.com/2012/12/06/backbone-tutorial-2/

Je suppose que vous pouvez aussi l’essayer avec

 if (google && google.maps && google.maps.Geocoder) { // now google.maps.Geocoder is gonna be defined for sure :) }