26AprGoogle Maps, creación de mapas – Parte II

En esta nueva parte de creación de mapas vamos a incorporar a nuestro mapa la posibilidad de añadir marcadores al mapa y además cada marcador dispondrá de un globo de información extendida. Nos basaremos en el código resultante de la primera parte así que si no la has léido te recomiendo que lo hagas.

El sistema que vamos a implementar es estático así que tendremos que meter manualmente en el código las direcciones de los marcadores. Google nos ofrece en su API la clase GMarker que representa un marcador en el mapa, para posicionar el marcador debemos especificar las coordenadas en las que queremos que aparezca.
Para convertir una dirección a sus coordenadas tenemos la clase GClientGeocoder, esta clase tiene un método llamado getLatLng al que pasamos una dirección y una función que hará de callback y será dónde generemos el marcador.

Primero creamos el objeto GClientGeocoder

geocoder = new GClientGeocoder();

Ahora veremos el código que crea un marcador, lo asigna al mapa y añade un globo de información con la dirección:

var marker = new GMarker(point);
map.addOverlay(marker);
marker.openInfoWindowHtml(DIRECCIÓN);

Dónde DIRECCIÓN es la dirección que estamos geolocalizando. Ahora vamos a ver todo el código completo, evidentemente realizaremos algunos ajustes como introducir la dirección en una variable para trabajar con ella además introduciremos alguna que otra comprobación rutinaria.

El código quedaría así:

<!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" xml:lang="es" lang="es">
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

 <title>Primeros pasos con Google Maps</title>

 <script src="http://maps.google.com/maps?file=api&v=2&key=TU-CLAVE-API" type="text/javascript">
 </script>

 <script type="text/javascript" charset="utf-8">
   function initialize() {
     var map = new GMap2(document.getElementById("map_canvas"));
     map.setCenter(new GLatLng(41.38, 2.18), 13);

     var address = "La Rambla, 08002, Barcelona";
     showAddress(address, map);
 }

 function showAddress(address, map) {
   geocoder = new GClientGeocoder();
     if (geocoder) {
       geocoder.getLatLng(address, function(point) {
       if (!point) {
         alert("No se ha podido geolocalizar la dirección" + address);
       } else {
         map.setCenter(point, 13);
         var marker = new GMarker(point);
         map.addOverlay(marker);
         marker.openInfoWindowHtml(address);
       }
     });
   }
 }
 </script>

</head>

<body onload="initialize()" onunload="GUnload()">
<div id="map_canvas" style="width: 500px; height: 300px"></div>
</body>
</html>

El resultado de este script lo podéis ver aquí.

Espero vuestras dudas/comentarios!

One Response and Counting...

  • Primeros pasos con Google Maps | Error: Segmentation Fault!

    April 26th 2009

    [...] quieres continuar con este tutorial aquí tienes la parte [...]