web-dev-qa-db-fra.com

Comment charger l'API Google Maps avec RequireJS?

J'ai du mal à charger l'api gmaps avec requireJS. Voici ce que j'ai essayé:

requirejs.config({
    urlArgs: "noCache=" + (new Date).getTime(),
    paths : {
        "jquery": "vendor/jquery-1.8.2.min",
        "bootstrap": "vendor/bootstrap.min",      
        "underscore": "libs/underscore-min",
        "backbone": "libs/backbone-min",    
        "template": "libs/template",
        "gmaps": "http://maps.google.com/maps/api/js?v=3&sensor=false"
    },
    shim: {
        'backbone': {
            deps: ['jquery', 'underscore'],
            exports: 'Backbone'
        },
        'underscore': {
            exports: '_'
        },
        'bootstrap': {
            deps: ['jquery']
        },
        'gmaps': {
            deps: ['jquery']
        },
        'main':{
            deps: ['jquery','gmaps']   
        }
    }
});

require(["main"], function (main) {})

Mais à l'intérieur de main.js lorsque j'essaie d'instancier le géocodeur que j'ai obtenu, undefined n'est pas une erreur de fonction.

var geocoder = new google.maps.Geocoder();

Des idées que pourrais-je faire de mal?

google-maps-api-3requirejsjs-amd
45
hjuster

J'ai réussi à le trier avec le plugin async .

Un exemple rapide est:

require.config({
    paths: {
        'async': 'lib/requirejs-plugins/src/async'
    }
});

define(['async!http://maps.google.com/maps/api/js?sensor=false'], function() {
    // Google Maps API and all its dependencies will be loaded here.
});
64
hjuster

Merci à la documentation officielle de cause user1706254: https://github.com/millermedeiros/requirejs-plugins/ utilisait le mot-clé 'define' qui ne fonctionnait pas pour moi mais 'require' fonctionnait bien.

Je n'ai pas pu charger directement:

require(["goog!maps,3,other_params:sensor=false"], function(){});

Mais l'utilisation de la méthode asynchrone a fait l'affaire:

require(['async!http://maps.google.com/maps/api/js?sensor=false'], function(){});
12
hugsbrugs

Vous n'avez pas besoin du plugin async pour utiliser Google Maps avec require.js. Le but peut être atteint en utilisant seulement une simple configuration shim :

require.config({
    paths: {
        gmaps: '//maps.googleapis.com/maps/api/js?' // question mark is appended to prevent require.js from adding a .js suffix
    },
    shim: {
        gmaps: {
            exports: 'google.maps'
        }
    }
});

require(['gmaps'], function (gmaps) {
    var center = {lat: -34.397, lng: 150.644}; 
    var map = new gmaps.Map(document.getElementById('map'), {
        center: center,
        zoom: 8
    });
    new gmaps.Marker({
        map: map,
        position: center
    });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.js"></script>

<div id="map" style="width: 100%; height: 200px"></div>
5
Finesse

Dans la continuité de hjuster, voici un rapide exemple d'utilisation du plugin async

https://Gist.github.com/millermedeiros/882682

4
codekipple

Il existe également un plugin goog (nécessite async et propertyParser), disponible sur github

Exemple d'utilisation pour google maps:

require(["goog!maps,3,other_params:sensor=false"], function(){});
4
loleksy

La réponse de @ hjuster m'a ouvert la voie et je l'ai résolu par une fonction de rappel .

define(['async!http://maps.google.com/maps/api/js?key=YOURKEY!callback'],
    function (_ExpectedMap) {
                              callback(); 
                           });

Remarquez le ! Rappel à la fin de l'url commence par async! , la méthode de rappel est appelée lorsque l'opération de chargement est terminée.

function callback()
{
    //Now load google maps API dependant libraries
    require(['gmapsLib'], function (googlemaps) {
                     window.GMaps = googlemaps;
                   }
}

Il y a un autre question J'ai récemment remarqué qu'une autre fonction (onLoad) est utilisée au lieu du rappel pour éviter les erreurs de timeout. Intéressant.

0
Davut Gürbüz