Como poner google maps en tu web
V�a lapuebladecastro
Peque�o manual para insertar google maps en tu web:
Alfonso Egio
Mucho se ha dicho ya acerca de la Web 2.0 y de las posibilidades y nuevos servicios que ofrece como filosof�a de dise�o de portales, sistemas de gesti�n de contenidos, bookmarking social y etc …
Pese a todo y c�mo suele pasar en un gran n�mero de casos dentro de lo que son las tendencias tecnol�gicas actuales, existen aun muchas iniciativas que podriamos calificar de fenomenolog�a burbujil … es decir, no ofrecen ning�n tipo servicio valorable en si mismo aparte de una ingente exhibici�n tecnol�gica que descuida los intereses de los usuarios o visitantes.
No obstante, de entre todo el conjunto de aventuras desarrolladas en el marco de lo que hoy se conoce como la nueva Web, uno de los primeros gigantes de internet ofrece un servicio claramente diferenciado con grandes posibilidades y al alcance de cualquiera.
Nos referimos a Google con su brillante aplicaci�n Google Maps.
Lo cierto es que desde Junio de 2005, adem�s de poder disfrutar de la aplicaci�n alojada en Google, disponemos del servicio Google Maps Api que nos permite empotrar toda la funcionalidad de dicha aplicaci�n en nuestra propia Web. En las lineas que siguen vamos a proporcionar un primer ejemplo b�sico de uso de dicha interfase sobre Javascript para poder incluir un mapa como el que sigue en nuestra p�gina:
Mapa interactivo de La Puebla de Castro basado Google Maps API. Puedes utilizar los controles de Zoom y desplazamiento adem�s de admirar la vista por sat�lite
C�digo javascript
En primer lugar y dado que Google Maps, es la aplicaci�n AJAX por excelencia, (debemos tener en cuenta que la J va por Javascript), el API que nos ofrecen desde Google est� en Javascript. A continuaci�n se comenta el c�digo que debemos incluir entre <head> y </head> de nuestra p�gina HTML:
<script src="http://maps.google.com/maps?file=api&v=2&key=..."
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var infoTabs = [
new GInfoWindowTab("Tab #1", 'La Puebla de Castro')
];
var map = new GMap2(document.getElementById("map"));
map.addControl(new GSmallMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(42.1455, 0.2874), 14);
var marker = new GMarker(map.getCenter());
GEvent.addListener(marker,
"click",
function()
{ marker.openInfoWindowTabsHtml(infoTabs); });
map.addOverlay(marker);
marker.openInfoWindowTabsHtml(infoTabs);
}
}
//]]>
</script>
Tal como se puede apreciar, se invoca a un script con URL:
http://maps.google.com/maps?file=api&v=2&key=...........
Donde detr�s de key hemos de emplazar nuestra clave de Google Maps que podemos conseguir en Google Maps Signup con tan solo indicar la URL de nuestra p�gina y aceptar los t�rminos del servicio.
A partir de aqu�, se pasa nuestra parte del c�digo dentro de la c�psula CDATA para personalizar nuestro mapa. En primer lugar se instancia un GInfoWindowTab en el que podemos extender el HTML deseado (incluso mostrar im�genes e hiperv�nculos como en �sta misma p�gina). A continuaci�n, instanciamos el mapa como un objeto GMap2, le a�adimos los controles de zoom y desplazamiento adem�s de los de vista sat�lite, h�brida y etc … (GSmallMapControl y GMapTypeControl), situamos el centro del mapa y zoom (14) mediante la instrucci�n:
map.setCenter(new GLatLng(42.1455, 0.2874), 14);
Haciendo alusi�n directa a la latitud y longitud geogr�fica de nuestro querido municipio, integramos la ventana de informaci�n de infoTabs y finalmente la mostramos por defecto asociada al marker (color naranja) del centro del mapa.
Por �ltimo no olvidemos incluir sobre el tag body de nuestro c�digo HTML los siguientes atributos de evento:
<body onload="load()" onunload="GUnload()">
Para a continuaci�n situar el mapa donde nos plazca mediante un tag de tipo div formateado al gusto:
<div id="map" style="width: 500px; height: 500px"></div>
De modo que ya podemos disfrutar de nuestros propios y personalizados mapas interactivos … suerte y a por ellos !
6 Comments »
RSS feed for comments on this post. TrackBack URL
y como haces eso en un blog de wordpress como el tuyo?
hola, wordpress esta capado para no poder ejecutar codigo javascriot por lo tanto :S es una pena
saludos
One of the best locations I’ve come across lately!!! Definately a permanent bookmark!
Hola, es la primera vez que pongo un comentario en internet, pues he visto que la pregunta de como poner el mapa google en tu web se hace mucho.
Lo MAS FACIL ES : te vas directamente a google map, buscas lo que quieres poner el tu web, Al lado del mapa te sale un enlace que pone: ENLAZAR CON ESA PAGINA, te sales dos codigos y copias el de abajo, lo pegas en tu web donde quieras y ya esta. Es cosa de dos minutos y no tienes que saber nada de HTML. Asi quedara en tu web: http://www.barcelonanights.net/mapa.html
Ahhh, lo puedes poner como opcion satelite o como calles.
Espero que os haya servido de ayuda!!!!
muchas gracias!!;)
Si quieres que los usuarios de tu portal web puedan visualizar en un mapa las localizaciones de todos ellos de forma conjunta, lo más sencillo es simplemente colocar un link a esta url (http://www.uniworldpro.com/uniworldpro/geovisits.php) como este:
Ver de donde vienen los usuarios de este portal
Simplemente instala el enlace y haz click para visualizar inmediatamente tu posición en el mapa. Según vayan accediendo más y más usuarios se irá creando un histórico con sus lugares de procedencia.