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="https://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="https://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

13 Respuestas a Como usar Google Maps en tu web – Parte III

  1. luis 1/3/2007 a 20:04 #

    no funciona tu codigo :S

  2. Carlos Alberto Montoya 11/9/2007 a 11:06 #

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

  3. Max Glaser 12/9/2007 a 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.

  4. 3kaiser 20/1/2008 a 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).

  5. marc 12/3/2008 a 13:02 #

    No van los mapas de la parte 3

  6. Enlaces interes 3/5/2008 a 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.

  7. kabrator 6/5/2008 a 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.

  8. Aulongos 30/5/2008 a 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!!!

  9. 3spartaco 3/6/2008 a 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);

    }

    //]]>

  10. Max Glaser 3/6/2008 a 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

  11. fernando 28/8/2008 a 12:02 #

    quisiera saber como poder llamar a las api de google map en un pop up

  12. Max Glaser 28/8/2008 a 12:44 #

    de la misma forma que se lo hace en una página normal.

  13. carlos 30/8/2009 a 01:44 #

    saludos, como hago la creacion de la marca para la version 2?