Escrito por Yosi_ el viernes, 23 de mayo de 2008
En muchos casos puede ser interesante agregar a nuestra web una función de geolocalización para situar claramente eventos, usuarios, etc. Evidentemente al pensar en algo así a todos se nos viene a la cabeza Google Maps, por ser un referente en la materia y porque seguramente casi todos habremos visto alguna web que implemente dicha funcionalidad a partir de la API que Google ofrece con ese fin.
En este caso voy a mostrar un pequeño código en JavaScript que cargue dinámicamente el adjunto .js necesario y a partir de ahí muestre los mapas que deseemos. Sería más sencillo cargar el archivo desde el HTML, y de hecho hay varios ejemplos en otros blogs que proceden de esa forma, pero en este caso pretendo optimizarlo dando la posibilidad de añadir la característica mencionada sin aumentar el peso de la web y por tanto la transferencia y el tiempo de carga (nada desdeñable teniendo en cuenta que el archivo estará en un servidor externo) salvo que se utilice. Esto por supuesto implica que en el momento de cargar la página el mapa no va a ser visible, así que este método solo tiene sentido para aquellas aplicaciones en las que los mapas inicialmente estén ocultos y la carga se realice posteriormente.
A continuación se muestra el código:
El primer paso es conseguir una key válida para el dominio en el que se va a utilizar Google Maps (en caso de hacer pruebas en modo local, se deberán obtener una para las pruebas y otra una vez que la web se suba al servidor).
Una vez hecho esto y sustituido el valor de la variable googleMapsKey, solamente deberemos ocuparnos de la llamada a la función showMaps(), que será la encargada de realizar todo el proceso. Los argumentos de la misma corresponden al elemento en el que se quiere mostrar el mapa (mapsDiv), y las coordenadas de localización indicadas en grados (longitud, latitud).
El proceso que se lleva a cabo una vez que se ha realizado la llamada a showMaps() consiste en comprobar si se debe cargar el script. De ser así se procede a hacerlo y al término se vuelve a iniciar la función. De lo contrario el mapa se sitúa en el elemento correspondiente y se fijan las coordenadas indicadas.
Este pequeño script puede ser utilizado para cargar cuantos mapas simultáneos queramos sabiendo que únicamente se cargará el adjunto de la API de Google Maps la primera vez, y en el caso de que no se utilice, solamente estaremos añadiendo a la página el escaso peso del código anteriormente descrito.
En este caso voy a mostrar un pequeño código en JavaScript que cargue dinámicamente el adjunto .js necesario y a partir de ahí muestre los mapas que deseemos. Sería más sencillo cargar el archivo desde el HTML, y de hecho hay varios ejemplos en otros blogs que proceden de esa forma, pero en este caso pretendo optimizarlo dando la posibilidad de añadir la característica mencionada sin aumentar el peso de la web y por tanto la transferencia y el tiempo de carga (nada desdeñable teniendo en cuenta que el archivo estará en un servidor externo) salvo que se utilice. Esto por supuesto implica que en el momento de cargar la página el mapa no va a ser visible, así que este método solo tiene sentido para aquellas aplicaciones en las que los mapas inicialmente estén ocultos y la carga se realice posteriormente.
A continuación se muestra el código:
var mapsLoad= 0; // variable a 0, script no cargado
var zoom= 11; // nivel de zoom del mapa
var googleMapsKey= key asignada por Google;
function showMaps(mapsDiv,longitud,latitud){
if (mapsLoad==0) {
initLoader();
}
else {
var map= new google.maps.Map2(document.getElementById(mapsDiv));
map.setCenter(new google.maps.LatLng(longitud,latitud), zoom);
map.addControl(new google.maps.SmallMapControl());
map.setMapType(G_HYBRID_MAP);
}
}
function loadMaps() {
mapsLoad=1;
google.load("maps", "2", {"callback" : showMaps});
}
function initLoader() {
var script = document.createElement("script");
script.src = "http://www.google.com/jsapi?key=";
script.src += googleMapsKey+"&callback=loadMaps";
script.type = "text/javascript"
document.getElementsByTagName("head")[0].appendChild(script);El primer paso es conseguir una key válida para el dominio en el que se va a utilizar Google Maps (en caso de hacer pruebas en modo local, se deberán obtener una para las pruebas y otra una vez que la web se suba al servidor).
Una vez hecho esto y sustituido el valor de la variable googleMapsKey, solamente deberemos ocuparnos de la llamada a la función showMaps(), que será la encargada de realizar todo el proceso. Los argumentos de la misma corresponden al elemento en el que se quiere mostrar el mapa (mapsDiv), y las coordenadas de localización indicadas en grados (longitud, latitud).
El proceso que se lleva a cabo una vez que se ha realizado la llamada a showMaps() consiste en comprobar si se debe cargar el script. De ser así se procede a hacerlo y al término se vuelve a iniciar la función. De lo contrario el mapa se sitúa en el elemento correspondiente y se fijan las coordenadas indicadas.
Este pequeño script puede ser utilizado para cargar cuantos mapas simultáneos queramos sabiendo que únicamente se cargará el adjunto de la API de Google Maps la primera vez, y en el caso de que no se utilice, solamente estaremos añadiendo a la página el escaso peso del código anteriormente descrito.
237 Comentarios
Temas relacionados:
JavaScript
Web