How to load google maps dependency with a function using require js shim?

Question

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

http://stackoverflow.com/questions/15795648/how-to-load-google-maps-api-with-requirejs — Paul Grime, Sep 21 '13 at 22:25

score 0 · Answer 1 · edited Jun 20 '20 at 09:12

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

How to load google maps dependency with a function using require js shim?

1 Answers1

The Module

Usage