Índice
Añadir una marca simple
Para este ejemplo añadiremos una marca en el centro del mapa. Más adelante veremos como colocar la marca en un punto específico.
Para añadir la marca, en el código de nuestra función pondremos:
var center = new GMarker(map.getCenter());
map.addOverlay(center);
Veamos un ejemplo.
Título de una marca
Si añadimos más de una marca al mapa, quizás nos interese diferenciarlas. Para esto podemos añadirle un título a cada marca y mostrarlo en una ventana de información. También podemos utilizar esta ventana para agregar más información a la marca, como la dirección o una foto del lugar que representa.
Veamos cómo se hace. Lo que tenemos que hacer es añadirle un título a la marca, colocando ésta línea después de crear la marca y antes de añadirla al mapa.
center.title = "Centro del mapa";
Para mostrar la ventana con el título, una vez añadida la marca al mapa, pondremos:
map.openInfoWindowHtml(center.getPoint(), center.title);
El resultado final sería:
var center = new GMarker(map.getCenter());
center.title = "Centro del mapa";
map.addOverlay(center);
map.openInfoWindowHtml(center.getPoint(), center.title);
Continuamos con nuestro ejemplo.
Eventos
El problema que tienen las ventanas de información es que, si las cierras, ya no hay forma de volver a abrirlas. Para solucionarlo utilizaremos los eventos, en concreto, el evento "click" del mapa.
El funcionamiento será:
- Añadir el evento "click" sobre el mapa
- Comprobar si el evento se ha producido sobre el mapa o sobre una marca
- Si se ha producido sobre una marca, comprobar si tiene un título para mostrar
- Si tiene un título para mostrar, abrir la ventana de información
El código necesario para realizar todo esto es el siguiente:
GEvent.addListener(map, "click", function(overlay, point){
if(overlay){
if(overlay.title)
map.openInfoWindowHtml(overlay.getPoint(), overlay.title);
}
});
Colocaremos este código antes de crear las marcas. Con esto podremos cerrar la ventana de información y volver a abrirla sólo con hacer "click" sobre una marca. Veámoslo en el ejemplo.
Colocar las marcas en una dirección concreta
Ya sabemos como crear marcas y añadirles información. Pero, ¿cómo coloco la marca donde yo quiera? Para poder colocar las marcas utilizaremos el objeto GClientGeocoder. Este objeto transforma una dirección pasada como texto (en el mismo formato que utiliza Google Maps para buscar una dirección) a un objeto que representa las coordenadas de esa dirección. A continuación se explican los pasos necesarios para realizar este proceso.
Para empezar, creamos el objeto con el siguiente código:
var geocoder = new GClientGeocoder();
Una vez creado el objeto, utilizaremos su función getLatLng pasándole como primer parámetro la dirección donde queremos colocar la marca y colocando en el cuerpo del else todo el código necesario para crear la marca. El código necesario para esto es el siguiente:
geocoder.getLatLng("Albacete", function(point) {
if (!point) {
alert("Lugar no encontrado");
} else {
map.setCenter(point, 12); // 12 indica el valor de zoom
var center = new GMarker(map.getCenter());
center.title = "Albacete";
map.addOverlay(center);
map.openInfoWindowHtml(center.getPoint(), center.title);
}
});
Podemos ver el resultado en este ejemplo.
[Siguiente: Marcas modificables por el usuario]