Lo básico para empezar a desarrollar con Google Maps II

Continuamos mostrando explicaciones sobre el desarrollo con Google Maps. Ahora vemos como mostrar marcas y asociar acciones cuando el usuario hace clic.
Como se puede ver en el artículo anterior sobre la creación de mapas de Google, crear un mapa y centrarlo en un punto es realmente simple. Sofistiquemos un poco nuestro mapa añadiéndole unos marcadores, de tal forma que podamos ubicar determinados puntos de interés en el mapa. El mapa con nuestros puntos de interés añadidos nos quedará de la siguiente manera:


Lo primero que necesitamos son las coordenadas de los nuevos puntos, en este caso la Plaza de Cibeles y la Plaza de Neptuno. A continuación asociaremos un marcador a cada uno de los puntos y lo mostraremos en el mapa. El código que muestra este segundo mapa es el siguiente:

<!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" xmlns:v="urn:schemas-microsoft-com:vml">
   <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

      <title>Introducción a Google Maps - Desarrolloweb</title>

      <script src="http://maps.google.com/maps?file=api&v=1&key= AÑADE_TU_CLAVE_AQUÍ" type="text/javascript"></script>
   </head>

   <body>
      <div id="map" style="width: 400px; height: 300px"></div>
       <script type="text/javascript">

   var map = new GMap(document.getElementById("map"));
   map.setMapType(G_SATELLITE_TYPE);
    map.addControl(new GLargeMapControl());
   map.addControl(new GMapTypeControl());

   //Puerta de Alcalá
   var point = new GPoint (-3.688788414001465, 40.41996541363825);
   var marker = new GMarker(point);
   map.addOverlay(marker);
   //Plaza de Neptuno
   var point = new GPoint (-3.6941099166870117, 40.4154238545226);
   var marker = new GMarker(point);
   map.addOverlay(marker);
   //Plaza de Cibeles
   var point = new GPoint (-3.693079948425293, 40.41940998761056);
   var marker = new GMarker(point);
   map.addOverlay(marker);
    map.centerAndZoom(point, 3);

    </script>

   </body>
</html>


Como puede verse, declaramos una variable point a partir de la cual creamos el marcador para posteriormente mostrarlo en el mapa con addOverlay. En esta ocasión hemos centrado el mapa en el último punto declarado, el correspondiente a la Plaza de Cibeles.

Estupendo, ya tenemos un mapa creado con una serie de puntos señalados sobre él, pero no aportan ninguna información al visitante. Lo apropiado sería satisfacer la curiosidad del usuario proporcionándole algo de información asociada a ese punto. Añadamos pues algo más de información a nuestros marcadores mostrando unas ventanas informativas que nos indiquen el nombre de la ubicación física sobre la que nos encontramos:

<!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" xmlns:v="urn:schemas-microsoft-com:vml">
   <head>
      <meta http-equiv="content-type" content="text/html; charset=UTF-8"/>

      <title>Introducción a Google Maps - Desarrolloweb</title>

      <script src="http://maps.google.com/maps?file=api&v=1&key= AÑADE_TU_CLAVE_AQUÍ" type="text/javascript"></script>
   </head>

   <body>
      <div id="map" style="width: 400px; height: 300px"></div>
       <script type="text/javascript">

      var map = new GMap(document.getElementById("map"));
      map.setMapType(G_SATELLITE_TYPE);
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());

      function createMarker(point, nombre) {
      var marker = new GMarker(point);
         GEvent.addListener(marker, 'click', function() {
          marker.openInfoWindowHtml(nombre);
       });
      return marker;
   }

   //Puerta de Alcalá
   var point = new GPoint (-3.688788414001465, 40.41996541363825);
   var nombre = "Puerta de Alcalá";
   var marker = createMarker (point, nombre);
   map.addOverlay(marker);
   //Plaza de Neptuno
   var point = new GPoint (-3.6941099166870117, 40.4154238545226);
   var nombre = "Plaza de Neptuno"
   var marker = createMarker (point, nombre);
   map.addOverlay(marker);
   //Plaza de Cibeles
   var point = new GPoint (-3.693079948425293, 40.41940998761056);
   var nombre = "Plaza de Cibeles"
   var marker = createMarker (point, nombre);
   map.addOverlay(marker);
    map.centerAndZoom(point, 3);

    </script>

   </body>
</html>


Este código nos genera el siguiente mapa, en el que al pulsar sobre el punto de la Plaza de Cibeles…


Efectivamente se muestra la ventana informativa con los datos asociados a ese punto. En este ejemplo hemos creado una función que nos crea los markers y sus correspondientes infoWindows para ahorrar algo de código. Esta pequeña función recibe como parámetros el GPoint donde queremos ubicar el marker, y un parámetro "nombre" que contiene la información que queremos mostrar en la ventana informativa asociada.

Hay que reseñar que para asociar la aparición de la ventana con el clic del usuario sobre nuestro punto tenemos que asociarle tal evento, que es lo que se hace en la sentencia:

GEvent.addListener(marker, 'click', function() {
   marker.openInfoWindowHtml(nombre);
});


De esta manera cada vez que se hace un clic sobre el marker se muestra en la infoWindow la información especificada en el parámetro "nombre". Nótese que hemos usado openInfoWindowHtml, que toma su parámetro como código html, de modo que podríamos incluir una maquetación al contenido de nuestra nueva infoWindow.

A lo largo de este artículo hemos visto las funciones más básicas de Google Maps, que proporcionan las herramientas más rudimentarias para manejar el servicio. Pese a no haber profundizado sobre la verdadera potencialidad del servicio, residente en el uso de XML, con lo aquí aprendido tenemos ya el bagaje necesario para empezar a profundizar en la API de Google Maps y empezar a crear scripts más avanzados.

Nota: Hemos visto aquí explicada el API 1 de Google Maps. Ahora estos códigos deben actualizarse siguiendo el API 2 de Google Maps. Para ello podemos consultar el artículo Mapas de Google API 2.

Autor

Javier Chaure

Desarrollador Web

Compartir

Comentarios

Jose Ramon

19/4/2006
Muy explicativos los dos capitulos. Estan bien explicados y tal como se muestra, lo hace sencillo de implementar. Posiblemente lo añada en una web futura que realice ya que parece muy funcional.

Hector C.

19/9/2009
AutoOpen del Mark
Excelente el articulo, realmente me ha ayudado bastante en el uso de estas nuevas funcionalidades.

Aprovechando el enlace quisiera saber como puedo hacer para que el openInfoWindowHtml ya aparesca desplegado. Quisiera visualizar un mapa con el punto y el texto desplegado.

Gracias.

Marisol

24/2/2010
no se muestra el mapa el estos dos ultimos anuncios
Para que el mapa se muestre en las secciones, "lo básico para empezar a desarrollar con Goople Maps 1 y 2" es necesario quitarle una linea de codigo que es lamap.setMapType(G_SATELLITE_TYPE); y asi si funciona.

Suerte!!

joseba

04/11/2010
Sitio más actualizado
El mejor sitio que he encontrado que utiliza la API 3 de googlemaps es http://www.elwebmaster.com/general/insertar-y-personalizar-google-maps-en-tu-sitio-web

fredy leon

19/4/2011
No funciona
He implementado el codigo pero no me muestra ningun mapa.Solo se muestra un recuadro.
Intente con otros ejemplos y si funciona correctamente.No se cual sera el problema.
Deberia funcionar solamente con cambiar el KEY y cargar la pagina en mi servidor