Comment charger l'API Google Maps avec RequireJS ?

Question

J'ai du mal à charger l'api gmaps avec requireJS . Voici ce que j'ai essayé :

requirejs.config({
    urlArgs: "noCache=" + (new Date).getTime(),
    paths : {
        "jquery": "vendor/jquery-1.8.2.min",
        "bootstrap": "vendor/bootstrap.min",      
        "underscore": "libs/underscore-min",
        "backbone": "libs/backbone-min",    
        "template": "libs/template",
        "gmaps": "http://maps.google.com/maps/api/js?v=3&sensor=false"
    },
    shim: {
        'backbone': {
            deps: ['jquery', 'underscore'],
            exports: 'Backbone'
        },
        'underscore': {
            exports: '_'
        },
        'bootstrap': {
            deps: ['jquery']
        },
        'gmaps': {
            deps: ['jquery']
        },
        'main':{
            deps: ['jquery','gmaps']   
        }
    }
});

require(["main"], function (main) {})

Mais dans le fichier main.js, lorsque j'essaie d'instancier le géocodeur, j'obtiens l'erreur ,,undefined is not a function".

var geocoder = new google.maps.Geocoder();

Une idée de ce que je pourrais faire de mal ?

Answer 1

La réponse de @hjuster m'a mis sur la voie et j'ai résolu le problème par un fonction de rappel .

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

Remarquez le !rappel à la fin de l'url commence par asynchrone ! La méthode de rappel est appelée lorsque l'opération de chargement est terminée.

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

Il y a un autre question J'ai remarqué récemment qu'une autre fonction (onLoad) est utilisée à la place de la callback pour éviter une erreur de timeout. Intéressant.

Answer 2

Je ne pouvais pas 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();
  });
});

Vérifiez simplement si gapi est prêt toutes 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 essayer avec

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