Como usar Google Maps en tu web - Parte III


OJO TODOS LOS EJEMPLOS EXPUESTOS AQUÍ FUNCIONAN CON LA API DE GOOGLE MAPS VERSIÓN 1. ACTUALMENTE YA SE ESTA USANDO LA VERSIÓN 2.x

En la segunda parte de este tutorial hemos visto como se pueden incorporar diferentes controles para posibilitar la navegación en el mapa. En esta tercera parte aprenderemos a colocar marcas en los mapas y también veremos la forma de etiquetar estas marcas.

4. Adicionar marcas
Copia el siguiente código y grábalo nuevamente en un archivo de texto, por ejemplo con el nombre mapa-04.html.

< !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>Mi primer Mapa</title>
<script src="http://maps.google.com/maps?file=api&v=1&key=API-KEY" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 300px; height: 300px"></div>
<script type="text/javascript">
//< ![CDATA[

if (GBrowserIsCompatible()) {
var map = new GMap(document.getElementById("map"));

map.setMapType(G_HYBRID_TYPE);

map.addControl(new GMapTypeControl());
map.addControl(new GSmallMapControl());

var marker = new GMarker(new GPoint(-68.127081,-16.511597));
map.addOverlay(marker);

map.centerAndZoom(new GPoint(-68.127081,-16.511597), 11);
}

//]]>
</script>
</body>
</html>

Sube el archivo a tu web server, al directorio de los mapas que hemos usado anteriormente. Abre la URL, por ejempo: http://www.mi-dominio.com/mapas/mapa-04.html. El resultado debería ser el siguiente:


Mapa con marca

- Ver Live Test

Las nuevas funciones en este script son las siguientes:

La función GMarker() crea una marca en el punto que se le pasa como parámetro. Luego la función addOverlay() adiciona una marca al objeto mapa.

En la documentación de la Maps API se muestra como se puede cargar una lista de marcas mediante archivos XML.

5. Adicionar etiquetas
El siguiente paso es poner etiquetas a estas marcas que hemos generados en el mapa. Para esto copia nuevamente el código de abajo y grábalo por ejemplo en el archivo mapa-05.html

< !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>Mi primer Mapa</title>
<script src="http://maps.google.com/maps?file=api&v=1&key=API-KEY" type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 300px; height: 300px"></div>
<script type="text/javascript">
//< ![CDATA[

if (GBrowserIsCompatible()) {
var map = new GMap(document.getElementById("map"));

map.setMapType(G_HYBRID_TYPE);

map.addControl(new GMapTypeControl());
map.addControl(new GSmallMapControl());

// Create the marker and corresponding information window
function createInfoMarker(point, address) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(address); } );
return marker;
}

var point = new GPoint(-68.127081,-16.511597);
var address = 'Dr. Max Glaser<br/>Plaza Abaroa<br />La Paz - Bolivia<br />Blog';
var marker = createInfoMarker(point, address);
map.addOverlay(marker);

map.centerAndZoom(new GPoint(-68.127081,-16.511597), 5);
}

//]]>
</script>
</body>
</html>

Sube el archivo a tu web server, al directorio de los mapas que hemos usado anteriormente. Abre la URL, por ejempo: http://www.mi-dominio.com/mapas/mapa-05.html. El resultado debería ser el siguiente:


Mapa con marcas y etiquetas

Esta vez, el código se pone más complejo. Primeramente tenemos que definir una función

function createInfoMarker(point, address) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() { marker.openInfoWindowHtml(address); } );
return marker;
}

La función createInfoMarker() genera una marca y le adiciona un listener de eventos del tipo clic, que abre la ventana con la etiqueta al hacer un clic en la marca.

Finalmente la marca generada con esta función es adicionada mediante addOverlay() al objeto mapa.

Después de que te he presentado las funciones fundamentales para poder colocar mapas en una página web, en la cuarta y ultima sección te presentare una serie de aplicaciones que usan la Maps API de Google. Analizando estos ejemplos seguramente vas ha encontrar rápidamente nuevas ideas para incorporar los mapas de Google en tu próximo proyecto.

Primera Parte Segunda Parte Tercera Parte Cuarta Parte

Artículos relacionados

Información y Enlaces

Integrese haciendo comentarios, revisando lo que otros tienen que decir o agregando enlaces desde su propio blog a nuestros Artículos

Información
Septiembre 29th, 2005
10 Respuestas
"Feeds" y Enlaces
Comment Feed
De este Autor
Del.icio.us
Digg
Technorati
Categories and Tags
Know How

Otros Artículos
Como usar Google Maps en tu web - Parte IV
Como usar Google Maps en tu web - Parte II

Agrege un Comentario

Tome un momento para hacer un comentario diciendonos que piensa. Se permite utilizar algunos comandos de HTML básico para dar formato al texto.

Comentarios de los Lectores

Comentario Numero:
1
Escrito por:
luis
Agregado el:
1/3/2007 at 20:04

no funciona tu codigo :S

Comentario Numero:
2
Escrito por:
Carlos Alberto Montoya
Agregado el:
11/9/2007 at 11:06

El código para La adición de marcas y la adcion de etiquetas, no funciona, genera error.

Comentario Numero:
3
Escrito por:
Max Glaser
Agregado el:
12/9/2007 at 07:49

Carlos,
Debes usar la versión correcta de la API de Google Maps. El código de este ejemplo es para la versión 1.0.

Ahora la API ya tiene una nueva versión.

Comentario Numero:
4
Escrito por:
3kaiser
Agregado el:
20/1/2008 at 11:47

Falla porque la línea:
map.centerAndZoom(new GPoint(-68.127081,-16.511597), 5);

no figura en el lugar incorrecto. Debe ponerse justo después de definir el tipo (setMapType) y antes de añadir los controles (addControl).

Comentario Numero:
5
Escrito por:
marc
Agregado el:
12/3/2008 at 13:02

No van los mapas de la parte 3

Comentario Numero:
6
Escrito por:
Enlaces interes
Agregado el:
3/5/2008 at 16:31

Muy bueno el tutorial aunque ahora que venía lo interesante encuentro que no funcionan los ejemplos… a ver si nos dices el fallo. Saludos y muy buena aportación tu tutorial.

Comentario Numero:
7
Escrito por:
kabrator
Agregado el:
6/5/2008 at 05:26

Hola, a ver si me podeis ayudar
Estoy trasteando con la apis de google maps y me ha surgido un
problema. A ver si me podeis ayudar.

He creado una ruta y he eliminado las marcas que me creaba (he usado
el loadFromWaypoints para ello) y quiero poner mis propias marcas con
el texto que yo quiera. Para ello he hecho un bucle for que crea las
marcas en las posiciones que yo quiero que esten, el problema me surge
es a la hora de ponerle un texto (openInfoWindowHtml) a la marca, y es
que solo me pone el texto en el ultimo punto y luego si le pincho a
alguno de los puntos, me va al punto con texto y me lo abre.

os pongo el codigo del for a ver si me podeis ayudar en esto.

for (i = 0; i Hora –> ‘ + fecha2[i] + ‘‘;
GEvent.addListener(marker, “mouseover”, function()
{marker.openInfoWindowHtml(mensaje); } );

mapa.addOverlay(marker);

} // for i

tengo por ahi unos arrays que son los que guardan la informacion que
deberia salir en el bocadillo ese y otros con las latitudes y las
longitudes. Como digo, los puntos me salen bien, la ruta tambien, lo
que no me salen son esos textos.

Otra cosa mas, es posible editar las marcas que salen con el
loadFromWayPoints (esas que son de la A a la Z)????

Bueno, muchas gracias anticipadas.

Comentario Numero:
8
Escrito por:
Aulongos
Agregado el:
30/5/2008 at 03:00

Hola, alguien sabe como se elimina una marca del mapa??

Es decir, tengo un mapa con 4 marcas, y me gustaría eliminar una de ellas en concreto, alguien sabe como???

Muchas gracias a todos!!!

Comentario Numero:
9
Escrito por:
3spartaco
Agregado el:
3/6/2008 at 16:05

3kaiser
Tiene razon el codigo bien puesto para que funcione queda asi:

Mi primer Mapa

//Plaza AbaroaLa Paz - BoliviaBlog’;
var marker = createInfoMarker(point, address);
map.addOverlay(marker);

}

//]]>

Comentario Numero:
10
Escrito por:
Max Glaser
Agregado el:
3/6/2008 at 16:10

OJO: el código fuente de estos ejemplos funciona para la API Version 1.

Actualmente ya se esta usando la versión 2.x