Using the async plugin with requirejs to load googlemaps

Question

I am trying to use the Async module of https://github.com/millermedeiros/requirejs-plugins to load the googlemap api. My index.html file contains the following requirejs configuration:

 <script data-main="scripts/myscript" src="scripts/require.js"></script>
<script>
    requirejs.config({
"baseUrl": "scripts",
"paths": {
   "async": "require_plugins/async",
   "gmaps": "gmaps",
  "infobox":"http://google-maps-utility-library-v3.googlecode.com/svn/trunk/infobox/src/infobox",
  "jquery":"//code.jquery.com/jquery-2.1.1.min",
  "jquery_mob":"//code.jquery.com/mobile/1.4.3/jquery.mobile-1.4.3.min"
},
waitSeconds: 15

});

All my javascript files are stored in a scripts folder (relative to index.html) e.g. script/myscript.js and script/require.js and the async plugins are stored in a subfolder of script called require_plugins e.g. script/require_plugins/async.js

The javascript where I define the googlemap module is called gmaps.js (stored in the script folder) and looks as follows:

define("GMAP",['async!https://maps.googleapis.com/maps/api/js?  &key=xxxxxx&region=uk&libraries=places,geometry'], function () {
return window.google.maps;
});

I have obfuscated the key parameter intentionally here. According to the documentation, I should be able to use the gmaps module anywhere in other javascript files just by invoking it like so:

require(["gmaps"],function(GMAP)
{
map= new GMAP.Map("#map-div");
 //and then some code to display the map
}

Unfortunately, it does not work at all. It seems that the googlemap library has not loaded at all. I use absolute URLs for jquery and that works fine but googlemap fails miserably. My question is: Is there something wrong with my requirejs config? I can't think of anything else causing this fault :(

kinghfb · Accepted Answer · 2014-08-11 12:16:32Z

1

My understanding is that the name you set in define() is what you need to use when writing the dependencies.

e.g.:

define('GMAP', ['async!<path>'], function() { return window.google.maps; });

require(['GMAP'], function(GMaps) { ... });

This is how I get GMaps to load for me. I have a secondary problem now that other libraries that depend on Maps no longer load.

answered Aug 11, 2014 at 12:16

kinghfb

1,0215 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

hansi70 Over a year ago

Thanks for that and it actually makes sense what you say. Did u fix the secondary problems?

kinghfb Over a year ago

Yes, but it was because I'm an idiot :) I wrapped the loader with the wrong dependencies. My example is the one I use and I no longer have a problem with it at all.

Collectives™ on Stack Overflow

Using the async plugin with requirejs to load googlemaps

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related