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