How to load Google Maps API with RequireJS?

Question

I am struggling to load gmaps api with requireJS . This is what I've tried:

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

But inside main.js when I try to instantiate the geocoder i got ,,undefined is not a function" error.

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

Any ideas what could I be doing wrong?

Answer 1

I've managed to sort it out with the async plugin.

A quick example is:

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

Answer 2

Thanks to user1706254 cause official documentation : https://github.com/millermedeiros/requirejs-plugins/ was using the keyword 'define' that wasn't working for me but 'require' is working fine.

I couldn't load directly :

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

But using the asynchronous way did the trick :

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