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 ralentizar 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 utilizarlo, 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:
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.
Código :
<!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:
Código :
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 la 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 llamar 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:
Código :
<!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>
Código :
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.
