google-maps-api-3 - require.jsで使用するGoogleマップV3のAMDバージョン?

Question

AMDバージョンである必要があるrequire.jsのようなものでGooglemaps V3を使用した人はいますか? すでにどこかで行われていますか？

Answer 1

require.jsでは、非同期プラグインを使用して、次のように呼び出すことができます。

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

Answer 2

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 3

非同期に加えていくつかの機能を追加するGoogle マップ AMD ローダー プラグインをまとめました。ローダ。

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