Как загрузить API Google Maps с помощью RequireJS?

Я пытаюсь загрузить gmap api с requireJS. Это то, что я пробовал:

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) {})

Но внутри main.js, когда я пытаюсь создать экземпляр геокодера, я получил, undefined не является функцией ".

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

Любые идеи, что я могу делать неправильно?

Ответы

Ответ 1

Мне удалось разобраться с плагином async.

Быстрый пример:

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

Ответ 2

Благодаря user1706254 вызывают официальную документацию: https://github.com/millermedeiros/requirejs-plugins/ использует ключевое слово 'define', которое не работает для меня, но "требует", работает нормально.

Я не мог загрузить напрямую:

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

Но с помощью асинхронного метода был трюк:

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

Ответ 4

Существует также goog плагин (требуется async и propertyParser), доступный на github

Пример использования карт google:

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

Ответ 5

Ответ

@hjuster привел меня кстати, и я решил с помощью функции обратного вызова.

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

Обратите внимание, что ! callback в конце URL начинается с async!, когда выполняется операция обратного вызова, вызывается метод обратного вызова.

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

Существует еще один вопрос , который я недавно заметил, другая функция (onLoad) используется вместо обратного вызова для предотвращения ошибки таймаута. Интересно.

Ответ 6

Не удалось заставить плагины работать по какой-то причине, но это обходное решение спасло мой день:

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

Просто проверьте, готов ли gapi каждые 100 миллисекунд, пока он не загрузится окончательно.

Нашел код в этой статье http://dailyjs.com/2012/12/06/backbone-tutorial-2/

Я думаю, вы также можете попробовать его с помощью

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