1

I have to load a JS file

requirejs([
MyCode/mapview
    ],
    function   () {

});

Now this depends on google maps as I also do

require( ["http://maps.google.com/maps/api/js?v=3.2&sensor=false"],
function() {
                var gm = document.createElement('script'); 
                gm.type = 'text/javascript'; gm.async = true;
                gm.src = document.location.protocol + "//maps.google.com/maps/api/js?v=3.2&sensor=false";
                var s = document.getElementsByTagName('script')[0]; 
                s.parentNode.insertBefore(gm, s);
            }
 );

just before that in my reuqire js include file. I have used shim command to load other local JS dependencies, but I am confused as to how to assign this dependency (google maps, http accessed file) to my MyCode/mapview.

How should I do this in shim? and also run the function before I load mapview.js?

requirejs.config({
    shim: 
    {
        'MyCode/mapview': ['????'],         
    }
});

I know of the dependency as I get this error, which is a google maps type Uncaught TypeError: Cannot read property 'HYBRID' of undefined

Improve this question
1

1 Answer 1

Reset to default
0

Here's a module pattern that might help.

The Module

var google_maps_loaded_def = null;

define(['jquery'],function($) {

  if(!google_maps_loaded_def) {

    google_maps_loaded_def = $.Deferred();

    window.google_maps_loaded = function() {
      google_maps_loaded_def.resolve(google.maps);    
    }

    require(['http://maps.googleapis.com/maps/api/js?sensor=true&callback=google_maps_loaded'],function(){},function(err) {
      google_maps_loaded_def.reject();
      //throw err; // maybe freak out a little?
    });

  }

  return google_maps_loaded_def.promise();

});

Available as a Gist: https://gist.github.com/MattSurabian/7868115

Usage

To Use the above module and take advantage of the fact that the promise resolves with google.maps:

    define([ 'app/lib/google-maps-loader' ], function(GoogleMapsLoader){
        GoogleMapsLoader.done(function(GoogleMaps){
            // your google maps code here!
            var geocoder = new GoogleMaps.Geocoder();
        }).fail(function(){ 
            console.error("ERROR: Google maps library failed to load");
        });
    });

Alternatively, just reference the google.maps object normally

    define([ 'app/lib/google-maps-loader' ], function(GoogleMapsLoader){
        GoogleMapsLoader.done(function(){
            // your google maps code here!
            var geocoder = new google.maps.Geocoder();
        }).fail(function(){ 
            console.error("ERROR: Google maps library failed to load");
        });
    });

I wrote a blog post that explains this problem and why I prefer the method above vs. the async plugin, which may be of some use: RequireJS Projects and Asynchronously Loading the Google Maps API

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.