AMD version of Google Maps V3 for use with require.js?

Question

Has anybody used Googlemaps V3 with something like require.js where it needs to be in AMD version? Is there one already done somewhere?

Answer 1

In require.js you can use the async plugin, then call it like such:

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

Answer 2

You can also do it using jQuery.Deferred() and some global variables (not ideal, but I needed it so I could optimize my files using grunt rjs, which didn't work for async):

// gmapsDone.js
window._mapsLoaded = $.Deferred();
window.gmapsLoaded = function(data) {
  delete window.gmapsLoaded;
  _mapsLoaded.resolve();
};

define(["http://maps.google.com/maps/api/js?v=3&sensor=false&callback=gmapsLoaded"], function(gmaps) {
  "use strict";

  return window._mapsLoaded.done;
});

Then, to use it:

define(["gmapsDone"], function(gmapsDone) {
  function load() {
    // Do something
  }
  gmapsDone(load);
});

https://gist.github.com/taktran/5389668

Inspired by http://blog.pixelingene.com/2011/10/using-jquery-dot-deferred-and-requirejs-to-lazy-load-google-maps-api/

Answer 3

I recently helped a friend solve this issue with a take off on the $.Deferred approach mentioned above. This plays nice with the optimizer and doesn't cause multiple script loads.

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 short blog post about this method here, which may be of some use: RequireJS Projects and Asynchronously Loading the Google Maps API

Answer 4

I put together a Google Maps AMD loader plugin, which adds some functionality on top of the async! loader.

require.config({
  googlemaps: {
    params: {
      key: 'abcd1234',        // sets api key
      libraries: 'geometry'   // set google libraries
    }
  }
});
require(['googlemaps!'], function(gmaps) {
  // google.maps available as gmaps
  var map = new gmaps.Map('map-canvas');
});