Creative Commons 3.0 RSS CSS 2.1 XHTML 1.0
Login  
Registro
 
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:

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.
90 Comentarios Temas relacionados: JavaScript  Web 

Enviado por Santiago el jueves, 1 de enero de 1970

No tienes un ejemplo de como hacerlo?
Enviado por Yosi_ el jueves, 1 de enero de 1970

Hola Santiago, teniendo en cuenta que este post tiene más de dos años y que Google ha cambiado desde entonces en más de una ocasión la API de Maps, quizá algún fragmento del código que se muestra ya no funcione, pero por lo demás el ejemplo que está arriba debería ser válido sustituyendo las variables como se indica. Por lo demás, eso es un ejemplo concreto y simplificado con fin didáctico, es complicado encontrarlo aislado así en una web real. No es más que una base para construir sobre ella según tu necesidades.
Enviado por hyundai a7hd el jueves, 1 de enero de 1970

its a lovely web site ,i would like it , I am glad that you simply shared this helpful information with us. iwill be back soon.
Enviado por rolex replica uk el jueves, 1 de enero de 1970

rolex replica uk
Enviado por i9400 MTK6589 el jueves, 1 de enero de 1970

You can actually unquestionably call at your commitments during the give good results you're writing. Society hopes for even more affectionate essayissts that you who will not be nervous to convey where did they think that. Frequently go after ones own core.
Enviado por cheap iphone 4 cases el jueves, 1 de enero de 1970

ahappydeal not only provides best deals on the products but also give assurance of the top quality of product as well as the services provided. One can save a lot of money from buying on ahappydeal online store just sitting at home which makes it extremely exciting & economical.
Enviado por MCITP MCSE el jueves, 1 de enero de 1970

MCITP MCSE
To make sure high-quality education and earn the MCITP certification it is extremely crucial to choose from the best Microsoft qualified specialist trainers. To create yourself abreast with the most current technologies and claim your dream profile at your workplace, join MCITP coaching bootcamp now.
Enviado por invisible underwear el jueves, 1 de enero de 1970

Shopping for 2013 New invisible underwear - PandaHope.com
Enviado por italian handbags el jueves, 1 de enero de 1970

Shopping for 2013 New italian handbags - PandaHope.com
Enviado por italian leather bag el jueves, 1 de enero de 1970

Shopping for 2013 New italian leather bag - PandaHope.com
Enviado por Replica Watches el jueves, 1 de enero de 1970

Replica Rolex Watches Discount Sale With AAA+ Swiss Replica Watches, Cheap Breitling Replica Online Shop, We offer amounts of best swiss Cartier replica watches. Grasp this chance to buy top quality Cartier Calibre, Hublot Replica, Santos 100, Tank replica watches here!
Enviado por guoguo el jueves, 1 de enero de 1970

Coach Outlet Online For Mr. Obama, the trip is a chance to show Europeans that heCoach Outlet is dedicated to NATO at a time when Russia is challengingCoach Factory Outlet the postwar European order, built on theCoach Outlet Online principle of no border changes by force.Coach Factory Outlet The tension you’re seeing between Russia and the WestCoach Outlet Store Online is going to be put on display in Wales, and the presidentCoach Outlet Store Online is going to be leading that effort,” said Ivo H. DaalderCoach Factory Outlet the previous American ambassador to NATO and now head of theCoach Outlet Chicago Council on Global Affairs. Mr. Obama, he saidCoach Handbags Outlet wants to reaffirm the unity and strength of the alliance.Coach Outlet NATO leaders are trying this week to reassure allies that theCoach Outlet commitment to collective defense, in NATO’s Article 5, is solid.Chanel Outlet Online The alliance wants to show that it means what it says and will haveLouis Vuitton the capability to defend its most vulnerable members against RussianLouis Vuitton Outlet aggression, whether overt or more covert, or a hybrid, of the two, as in Ukraine.Gucci Belts The really ironic aspect here is that a re-energizedGucci Belt restrengthened NATO is Vladimir Putin’s worst nightmareCoach Outlet Online and yet it’s his tactical actions that have done just thatCoach Outlet said James G. Stavridis, who was NATO’s commander from 2009Coach Factory Outlet to 2013 and is dean of the Fletcher School at TuftsCoach Outlet Online University, referring to Russia’s president.Coach Outlet Store It is also an opportunity for Mr. Obama, buffeted by a cascadeCoach Outlet Store Online of international crises, to rally Europeans into whatCoach Outlet Secretary of State John Kerry has called a “global coalitionCoach Factory Online to confront an increased terrorist threat from the IslamicCoach Factory Outlet State in Iraq and Syria and other radical Islamist groups in Africa.Coach Factory Outlet Though ISIS is not on the formal agenda for the summit meetingCoach Outlet Mr. Kerry and Defense Secretary Chuck Hagel will meet EuropeanCoach Outlet Store Online counterparts to develop a strategy to counter ISIS.Chanel Outlet Online But the emphasis will be on Russia. As both American and EuropeanLouis Vuitton Outlet leaders weigh additional sanctions against Moscow,Louis Vuitton Handbags Anders Fogh Rasmussen, the NATO secretary general, said MondayGucci Belt in Brussels that the new rapid reaction force “willGucci Belts ensure that we have the right forces and the rightLouis Vuitton Outlet Online equipment in the right place, at the right time.Oakley Sunglasses Outlet Numerous leaders of NATO countries have said that any hopeLouis Vuitton Outlet Online of achieving the “strategic partnership” with Russia envisionedOakley Sunglasses Outlet as long ago as the 1990 NATO summit was finished because of RussiaCheap Oakley Sunglasses s annexation of Crimea and invasion of eastern Ukraine.Oakley Sunglasses Nevertheless, NATO is being careful not to violate the NATO-Russia
Enviado por discount_viagra el jueves, 1 de enero de 1970

Hello!
Enviado por cialis_dosage el jueves, 1 de enero de 1970

Hello!
Enviado por viagra_dosage el jueves, 1 de enero de 1970

Hello!
Enviado por viagra_dosage el jueves, 1 de enero de 1970

Hello!
Enviado por generic_cialis el jueves, 1 de enero de 1970

Hello!
Enviado por generic_viagra el jueves, 1 de enero de 1970

Hello!
Enviado por cheap_cialis el jueves, 1 de enero de 1970

Hello!
Enviado por online el jueves, 1 de enero de 1970

Hello!
Enviado por cialis el jueves, 1 de enero de 1970

Hello!
Enviado por cialis el jueves, 1 de enero de 1970

Hello!
Enviado por cialis el jueves, 1 de enero de 1970

Hello!
Enviado por cialis el jueves, 1 de enero de 1970

Hello!
Enviado por cialis el jueves, 1 de enero de 1970

Hello!
Enviado por cialis el jueves, 1 de enero de 1970

Hello!
Enviado por in el jueves, 1 de enero de 1970

Hello!
Enviado por cialis el jueves, 1 de enero de 1970

Hello!
Enviado por pharmacy el jueves, 1 de enero de 1970

Hello!
Enviado por viagra el jueves, 1 de enero de 1970

Hello!
Enviado por viagra el jueves, 1 de enero de 1970

Hello!
Enviado por pharmacy el jueves, 1 de enero de 1970

Hello!
Enviado por viagra el jueves, 1 de enero de 1970

Hello!
Enviado por fast el jueves, 1 de enero de 1970

Hello!
Enviado por canadian_cialis el jueves, 1 de enero de 1970

Hello!
Enviado por canadian_viagra el jueves, 1 de enero de 1970

Hello!
Enviado por viagra_deal el jueves, 1 de enero de 1970

Hello!
Enviado por buy_viagra el jueves, 1 de enero de 1970

Hello!
Enviado por delivery el jueves, 1 de enero de 1970

Hello!
Enviado por to el jueves, 1 de enero de 1970

Hello!
Enviado por canadian el jueves, 1 de enero de 1970

Hello!
Enviado por cialis el jueves, 1 de enero de 1970

Hello!
Enviado por free el jueves, 1 de enero de 1970

Hello!
Enviado por cialis el jueves, 1 de enero de 1970

Hello!
Enviado por cialis_samples el jueves, 1 de enero de 1970

Hello!
Enviado por viagra_samples el jueves, 1 de enero de 1970

Hello!
Enviado por cialis_sale el jueves, 1 de enero de 1970

Hello!
Enviado por viagra_sale el jueves, 1 de enero de 1970

Hello!
Enviado por cialis el jueves, 1 de enero de 1970

Hello!
Enviado por cialis el jueves, 1 de enero de 1970

Hello!
Ir a página 1 2

Escribe tu comentario:

Nombre:
Web personal (opcional):