google-maps-api-3 - georreferenciación - google maps api key gratis

¿Cómo cargar API de Google Maps con RequireJS?

Question

Estoy luchando para cargar gmaps api con requireJS. Esto es lo que he intentado:

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) {})

Pero en main.js cuando intento crear una instancia del geocoder, obtengo un error "undefined is not an function".

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

¿Alguna idea de qué podría estar haciendo mal?

Answer 1

A continuación de hjuster, aquí hay un ejemplo rápido de cómo usar el complemento async

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

Answer 2

Gracias a user1706254 causar documentación oficial: https://github.com/millermedeiros/requirejs-plugins/ estaba usando la palabra clave ''define'' que no me funcionaba pero ''require'' funciona bien.

No pude cargar directamente:

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

Pero usar el modo asincrónico hizo el truco:

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

Answer 3

La respuesta de @ hjuster me guió y he resuelto mediante una función de devolución de llamada .

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

¡Observe que ! Callback al final de la url comienza con async! , se llama al método de devolución de llamada cuando se realiza la operación de carga.

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

Hay otra question he notado últimamente, otra función (onLoad) está en uso en lugar de la devolución de llamada para evitar el error de tiempo de espera. Interesante.

Answer 4

No necesita el complemento asíncrono para usar Google Maps con require.js. El objetivo se puede lograr utilizando solo una configuración simple 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>

Answer 5

No se pudo hacer que los complementos funcionen por algún motivo, pero esta solución me salvó el día:

 require([''https://apis.google.com/js/client.js?onload=doNothing''], function() {
    // Poll until gapi is ready
    function checkGAPI() {
      if (gapi && gapi.client) {
        self.init();
      } else {
        setTimeout(checkGAPI, 100);
      }
    }

    checkGAPI();
  });
});

Simplemente verifique si gapi está listo cada 100 milisegundos, hasta que finalmente se carga.

Encontró el código en este artículo http://dailyjs.com/2012/12/06/backbone-tutorial-2/

Supongo que también puedes intentarlo con

if (google && google.maps && google.maps.Geocoder) {
    // now google.maps.Geocoder is gonna be defined for sure :)
}

Answer 6

Pude resolverlo con el complemento async .

Un ejemplo rápido es:

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

Answer 7

También hay goog complemento goog (requiere async y propertyParser), disponible en async

Ejemplo de uso para google maps:

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