Enlaces de una página que activan marcas en mapas de Google

En este artículo vamos a ver un nuevo ejemplo de utilidad que se puede hacer con los Google Maps, que viene a completar la información que ofrecemos sobre las marcas en el Manual del API de los mapas de Google.

Nuestros objetivos son bien simples. Tenemos un mapa que tiene a su vez varias marcas colocadas en distintos puntos geográficos. Esas marcas tiene una información asociada, que aparece en el típico bocadillo (info window) de los mapas de Google, al pulsar sobre la marca. Esto ya lo vimos en varios artículos anteriores del manual, por ejemplo en Mostrar una ventana de info con las coordenadas donde se ha hecho clic en el mapa. Pero en este ejemplo vamos a hacer una pequeña variación, para que la ventana de info no sólo se muestre al hacer clic sobre la marca, sino que tengamos fuera del mapa de Google una serie de enlaces y que al pulsarlos activen las marcas de dentro del mapa, mostrando las ventanas con datos asociados.

Lo mejor para darse perfecta cuenta de lo que vamos a hacer es ver el ejemplo en marcha en una página aparte.

El ejemplo tiene poco misterio, si es que hemos seguido el manual de los mapas de Google. Simplemente tenemos que aprender a invocar eventos sobre las marcas, sin que el usuario tenga que hacer nada sobre ellas. Lo explicaremos con detalle.

Crear las marcas en el mapa

En este ejemplo tenemos 4 marcas y 4 enlaces. Primero demos un vistazo a las marcas:

Para crearlas hemos tenido que hacer una función y luego 4 llamadas a esa función pasando datos distintos:

function CrearMarca(punto, html){
   var miMarca = new GMarker(punto);
   map.addOverlay(miMarca);
   GEvent.addListener(miMarca, "click", function (){
      miMarca.openInfoWindowHtml(html);
   });
   return miMarca;
}

//estilo para las ventanas de info de las marcas
var estilo_bocadillo = "font-size: 10pt; font-family: verdana; lineheight: 120%;";

//creo marca 1
var point;
point=new GLatLng(40.413496049701955,-3.6968994140625);
var htmlBocadillo = "<div style='" + estilo_bocadillo + "'><b>Madrid:</b><br><img height='112' width='170' border='0' src='http://www.guiarte.com/archivoimg/miniaturas-usuarios/1893.jpg'/></div>"
marca1 = CrearMarca(point, htmlBocadillo);

//creo marca 2
point=new GLatLng(39.5633531658293,-0.2801513671875);
var htmlBocadillo = "<div style='" + estilo_bocadillo + "'><b>Pobla de Farnals:</b><br><img height='97' width='170' border='0' alt='' src='http://www.guiarte.com/archivoimg/miniaturas-usuarios/1662.jpg'/></div>"
marca2 = CrearMarca(point, htmlBocadillo);

//creo marca 3
point=new GLatLng(42.45690084412248,-6.053466796875);
var htmlBocadillo = "<div style='" + estilo_bocadillo + "'><b>Astorga:</b><br><img height='128' width='170' border='0' alt='' src='http://www.guiarte.com/archivoimg/miniaturas-usuarios/1522.jpg'/></div>"
marca3 = CrearMarca(point, htmlBocadillo);

//creo marca 4
point=new GLatLng(42.33012354634199,-3.6859130859375);
var htmlBocadillo = "<div style='" + estilo_bocadillo + "'><b>Burgos:</b><br><img height='150' width='113' border='0' alt='' src='http://www.guiarte.com/archivoimg/miniaturas-usuarios/35.jpg'/></div>"
marca4 = CrearMarca(point, htmlBocadillo);

En la función CrearMarca() que hemos visto al principio del anterior código veremos que se crea un objeto de la clase Gmarker. Luego, a través de Gevent.addListener() definimos un evento click sobre la marca, para ejecutar una función cuando el usuario hace clic sobre la marca. Lo único que se hace al hacer clic es mostrar la ventana de información asociada a la marca.

Luego en sucesivas llamadas a CrearMarca() se van creando 4 marcas distintas con datos diferentes, como el punto donde se colocan y el HTML de la ventana de información asociada.

Los enlaces para activar las marcas

Ahora, tenemos que ver cómo realizar enlaces fuera del mapa de Google para activar las marcas, o mejor dicho, para mostrar las ventanas de información de las marcas. Realmente el sistema para que una marca tenga una ventana de datos asociados ya está hecho, puesto que hasta este punto, hemos creado las marcas de tal modo que al hacer clic sobre ellas, se muestre la info window que hemos configurado para cada una.

Así que, para que estos enlaces externos al mapa funcionen, lo único que hay que hacer es, cuando se pulsen, simular un clic sobre una de las marcas. Es decir, al hacer clic sobre los enlaces tenemos que enviar un evento click sobre la marca que deseemos que se muestre su info.

Para ello, vamos a hacer una función que se encargará de lanzar un evento click sobre una marca:

function clicMarca(marca) {
   if (GBrowserIsCompatible() && cargado) {
      GEvent.trigger(marca, "click");
   }
}

Como se puede ver, con Gevent.trigger se lanza un evento sobre un elemento del mapa. En este caso será un evento "click" sobre una marca que recibiremos por parámetro.

La línea que hace el if (GBrowserIsCompatible() && cargado) sirve para que ese código sólo se ejecute en caso que nuestro navegador sea compatible con los mapas de google y que se haya cargado el mapa completamente (cuando se termina de cargar el mapa hago que la variable cargado sea true, lo que veremos mejor luego al mostrar el código completo del ejemplo)

Así pues, con esa función creada, los enlaces se colocarán con un código como este:

<a href="javascript: clicMarca(marca1)">Madrid</a>

Como vemos, el href del enlace llama a la función clicMarca(), para simular un clic sobre la marca.

Un tema de ámbito de variables y código del mapa

Hay un tema en este ejemplo sobre el ámbito de las variables que cabe comentar. Resulta que ese enlace externo al mapa, que llama a una función clicMarca(), pasándole una marca, puede dar problemas dependiendo del modo como hayamos hecho las variables donde están guardadas las marcas.

Tal como hemos hecho este ejemplo, necesitamos que las variables donde están los objetos marca sean globales a la página, así como la función clicMarca(). Si no, el javascript asociado al enlace no funcionará.

Comentado este detalle, que es importante, veamos el código completo del ejemplo

<!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=ISO-8859-1">
<title>Mapa de Google</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAAUnJY3ChJhF0YgyTSDJuVfBTqu-zEVMNfNVaqfAe9FKyfKhfBExSs9LrIQ7GOuBeSnaddg05sRmEBxQ"
type="text/javascript"></script>
<script type="text/javascript">

function clicMarca(marca) {
   if (GBrowserIsCompatible() && cargado) {
      GEvent.trigger(marca, "click");
   }
}

var marca1;
var marca2;
var marca3;
var marca4;
var cargado=false;

function load() {
   
   
   if (GBrowserIsCompatible()) {
      var map = new GMap2(document.getElementById("map"));
      map.addControl(new GLargeMapControl());
      map.addControl(new GMapTypeControl());
      map.setCenter(new GLatLng(40.41689826118782,-3.7034815549850464), 5);    
      
function CrearMarca(punto, html){
   var miMarca = new GMarker(punto);
   map.addOverlay(miMarca);
   GEvent.addListener(miMarca, "click", function (){
      miMarca.openInfoWindowHtml(html);
   });
   return miMarca;
}



//estilo para las ventanas de info de las marcas
var estilo_bocadillo = "font-size: 10pt; font-family: verdana; lineheight: 120%;";

//creo marca 1
var point;
point=new GLatLng(40.413496049701955,-3.6968994140625);
var htmlBocadillo = "<div style='" + estilo_bocadillo + "'><b>Madrid:</b><br><img height='112' width='170' border='0' src='http://www.guiarte.com/archivoimg/miniaturas-usuarios/1893.jpg'/></div>"
marca1 = CrearMarca(point, htmlBocadillo);

//creo marca 2
point=new GLatLng(39.5633531658293,-0.2801513671875);
var htmlBocadillo = "<div style='" + estilo_bocadillo + "'><b>Pobla de Farnals:</b><br><img height='97' width='170' border='0' alt='' src='http://www.guiarte.com/archivoimg/miniaturas-usuarios/1662.jpg'/></div>"
marca2 = CrearMarca(point, htmlBocadillo);

//creo marca 3
point=new GLatLng(42.45690084412248,-6.053466796875);
var htmlBocadillo = "<div style='" + estilo_bocadillo + "'><b>Astorga:</b><br><img height='128' width='170' border='0' alt='' src='http://www.guiarte.com/archivoimg/miniaturas-usuarios/1522.jpg'/></div>"
marca3 = CrearMarca(point, htmlBocadillo);

//creo marca 4
point=new GLatLng(42.33012354634199,-3.6859130859375);
var htmlBocadillo = "<div style='" + estilo_bocadillo + "'><b>Burgos:</b><br><img height='150' width='113' border='0' alt='' src='http://www.guiarte.com/archivoimg/miniaturas-usuarios/35.jpg'/></div>"
marca4 = CrearMarca(point, htmlBocadillo);
      
      cargado=true;
   }
}
window.onload=load
//]]>
</script>
<style type="text/css">
html,body{
margin:0px; height:100%;
font-family: verdana, arial, helvetica;
}
#map{
   float:left;
   margin-right:20px;
}
#enlaces{
   font-size: 12pt;
   margin-top: 10px;
   font-weight: bold;
}
#enlaces li{
   margin-bottom: 8px;
}
#pie{
   clear: both;
   padding: 10px;
}
</style>
</head>
<body>

   
   <div id="map" style="height: 550px; width:700px"></div>
   <div id="enlaces">
   <ul>
   <li><a href="javascript: clicMarca(marca1)">Madrid</a></li>
   <li><a href="javascript: clicMarca(marca2)">La Pobla de Farnals</a></li>
   <li><a href="javascript: clicMarca(marca3)">Astorga</a></li>
   <li><a href="javascript: clicMarca(marca4)">Burgos</a></li>
   </ul>
   </div>
   <br />
   <br />
<div id=pie>
Mapa para <a href="http://www.desarrolloweb.com/">DesarrolloWeb.com</a> por <a href="http://www.guiarte.com">Guiarte.com</a>
</div>   
</body>
</html>

Podemos ver el ejemplo de nuevo en una página aparte.