Cargar Google Maps de forma asíncrona
Escrito el 31 Octubre 2008 – 19:07 pm | por Marcos Fernández
Google Maps ha sido uno de los grandes inventos que se sacó Google de la manga. Normalmente para cargar Google Maps situamos una etiqueta <script> dentro de nuestra página con nuestra id del api de Google Maps. Luego modificamos la etiqueta <body> para que cuando se cargue el documento, ejecute una función para inicializar el mapa.
El problema que ya comenté en un post anterior (Cargar Google Analytics una vez se haya cargado la página), es que esto, en según que momentos, puede enlentecer de una forma muy grave nuestra página, o por ejemplo, el mapa lo tenemos en una pestaña que por defecto no es visible. Por ello, podemos obtar por una solución que incrementará sustancialmente la velocidad de carga de nuestra página y que se encargará de que, una vez se haya cargado la página, proceder a la descarga y la inicialización del nuestro Google Map.
Esta no es la única utilidad, también podríamos cargar nuestro Google Map a voluntad mediante la pulsación de cualquier elemento. Esto nos permitiría que en una página no cargásemos el Google Map hasta que el usuario decidiese utilizaro, aliviando la carga de nuestra página.
Veamos un ejemplo práctico llamando a Google Maps una vez se ha terminado la carga de nuestra página:
http://www.marcosdev.com/ejemplos/googlemaps_async/
Lo primero de todo, veamos la estructura de nuestros ficheros:
Por un lado tenemos un fichero html en el cual hay una capa que utilizaremos para insertar nuestro Google Maps y las llamadas a los ficheros googleMaps.js y jquery.js.
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ejemplo de carga de forma asíncrona de Google Maps</title>
</head>
<body>
<div id="mapa" style="width:300px;height: 300px">
<p style="text-align:center"><strong>Cargando</strong></p>
</div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="googleMaps.js"></script>
</body>
</html>
Cómo podemos ver, el div con id “mapa” tiene un texto interior que pone “Cargando”. Esto es para que mientras se carga nuestro Google Maps el visitante pueda saber que el navegador está trabajando. Después del div, insertamos las dos llamadas a nuestros ficheros javascript. El primero es la librería jQuery que nos ayudará realizar la petición de carga del conjunto de ficheros necesarios para cargar Google Maps.
En el fichero googleMaps.js tenemos el código necesario para realizar la carga del mapa:
function cargarMapa(){
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("mapa"));
map.setCenter(new GLatLng(39.578678,2.646021), 16);
}
};
$(document).ready(function(){
var api='ABQIAAAAOxTvdJxbyGuGB8_UUEe52xRHT0E5MDpBZnfhvo0jhLIefK70hRTYIol4_Lr75EWTtT9VjcaZzY2QWg';
$.getScript('http://maps.google.com/maps?file=api&v=2.x&key='+api+'&async=2&callback=cargarMapa');
});
Lo primero que vemos es una función llamada “cargarMapa” la cual será llamada una vez tengamos cargada la librería de Google Maps. Esta función únicamente se encarga de mostrar nuestro Google Maps en un determinado div (en nuestro caso el div llamado “mapa“) y situarlo en una coordenada (new GLatLng(39.578678,2.646021)) con un determinado zoom (16).
La parte interesante viene justo después. Vemos el comienzo típico de cualquier fichero js que jQuery ( $(document).ready(function(){ ) y justo después dos líneas de código; la primera es una variable en la cual, por cuestiones de tener un código más legible, guardo el clave del api de Google Maps. Y en el segundo realizo la petición, que a simple vista, es la misma url que normalmente nos da google para poner en las etiquetas <script>. Pero si nos fijamos, existe dos diferencias. Justo al final de la línea vemos que hay dos parámetros de url nuevos: &asyn=2&callback=cargarMapa. El primero (async=2) permite llamara de forma asíncrona (cuando nosotros queramos y no siempre cuando se carga el documento al completo), y el segundo (callback=cargarMapa) es el parámetro que le dice a Google Maps que función debe ejecutar una vez tenga todo lo necesario cargado para ser ejecutado.
Ponerlo en práctica es tremendamente sencillo y podemos sacarle mucha utilidad al tema, como por ejemplo, la siguiente demostración dónde cargamos el mapa cuando alguien hace clic sobre un botón:
http://www.marcosdev.com/ejemplos/googlemaps_async/index2.html
La diferencia entre el primer ejemplo y este segundo, reside en que la capa “mapa” la tengo escondida y que en vez de cargar el mapa directamente, le agrego una funcionalidad al botón para que este lo carge cuando hagan clic sobre él, y además, haga visible la capa:
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Ejemplo de carga de forma asíncrona de Google Maps</title>
</head>
<body>
<div id="mapa" style="width:300px;height:300px;display:none;">
<p style="text-align:center"><strong>Cargando</strong></p>
</div>
<input type="button" name="bCargar" id="bCargar" value="Cargar Mapa" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="googleMaps.js"></script>
</body>
</html>
function cargarMapa(){
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("mapa"));
map.setCenter(new GLatLng(39.578678,2.646021), 16);
}
};
$(document).ready(function(){
//Agregamos evento click al botón
$('#bCargar').click(function(){
//Mostramos la capa mapa
$('#mapa').show();
var api='ABQIAAAAOxTvdJxbyGuGB8_UUEe52xRHT0E5MDpBZnfhvo0jhLIefK70hRTYIol4_Lr75EWTtT9VjcaZzY2QWg';
$.getScript('http://maps.google.com/maps?file=api&v=2.x&key='+api+'&async=2&callback=cargarMapa');
});
});
Espero que les sea útil
P.D.: Los estilos de la capa “mapa” están escritos utilizando el atributo style. Esto no es una buena práctica; hay que utilizar ficheros CSS de estilos. Lo he hecho así para hacerlo más visible para todos.
P.D2.: En el segundo ejemplo se podría insertar la capa “mapa” en tiempo real sin necesidad de que esté en el código, pero sería menos didácticos para aquellas personas que tengan un nivel bajo de Javascript.
Etiquetas: asíncrona, carga, google, javascript, jquery, maps
9 Respuestas en “Cargar Google Maps de forma asíncrona”
Por juan en Nov 4, 2008 | Responder
hola
Por Experiencia Personal en Dic 10, 2008 | Responder
Vaya, muy interesante, me está gustando tu página.
A ver si puedo incrustar los mapas google en mi blog…
Por marcosdev en Dic 10, 2008 | Responder
Estoy contento de que te guste. Estoy preparando unos nuevos tutoriales pero por motivo de curro voy algo retrasado.
Gracias y un saludo
Por wend en Ene 29, 2009 | Responder
Me parece muy útil, gracias!
He intentado usarlo tal y como está en los ejemplos (cambiando la key) pero el mapa no carga. en Firefox aparece este error:
”
Error: _mF is not defined
Archivo de origen: http://maps.google.com/intl/es_ALL/mapfiles/140g/maps2.api/main.js
Línea: 15
”
¿Alguna idea del por qué de este error? Agradecería cualquier comentario.
Por Marcos Fernández en Ene 29, 2009 | Responder
Súbelo a alguna página y te reviso el código en un plis.
Un saludo y gracias
Por wend en Ene 29, 2009 | Responder
Hola de nuevo. Voy a intentar subirlo a algún servidor. Mientras, intento explicarolo. El problema lo tengo cuando los archivos .js están en un subdirectorio, si utilizo los 3 ficheros en el mismo directorio (/home por ejemplo), va perfecto, pero si pongo los .js en otro (/home/jvs/src/ por ejemplo) y los referencio así en ’src=”/jvs/src/….js”‘ dentro del .htm, ya no carga el mapa.
Gracias por adelantado tu rápida respuesta y por la ayuda!! En cuanto lo tenga subido paso el link que se verá más claro.
Por joph en Ene 31, 2009 | Responder
Muy Bueno! ¿Podría cargarse el mapa por ejemplo al pulsar al botón pero que los datos de latitud, longitud y zoom no fueran fijos sino que se pasaran de alguna forma como parámetro?
Por Marcos Fernández en Feb 1, 2009 | Responder
Por su puesto, no hay ningún tipo de problema, al igual que puedes agregar un evento click en un google map y capturar la posición. Miraré de sacar un rato esta semana para hacerte una demostración de lo que pides. Un saludo