Seguimos viendo ejemplos de eventos en mapas de Google: evento click en el mapa para recolocar una marca.
En el anterior capítulo del manual de desarrollo con el API de mapas de Google vimos los primeros detalles sobre el tratamiento de eventos. Ahora vamos a seguir con otro ejemplo de desarrollo en el que vamos a hacer un mapa que tiene una marca. Pulsando en cualquier parte del mapa reposicionaremos la marca a la posición donde se ha hecho clic.
El evento que vamos a ver es el click en el objeto map, de la clase GMap2. En este caso, recuperaremos el punto donde se ha hecho click para colocar la marca en ese punto.
Primero veamos el código para crear el mapa con una marca:
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(40,-4),3);
map.addControl(new GLargeMapControl());
map.setMapType(G_NORMAL_MAP);
var point = new GPoint (-4,40);
var marker = new GMarker(point);
map.addOverlay(marker);
Este mapa, centrado en España, tiene una marca también en España. Ahora veamos el sencillo código para detectar un evento de tipo click sobre el mapa:
GEvent.addListener(map, "click", function (overlay,point){
if (point){
marker.setPoint(point);
}
});
Se crea el escuchador de eventos, para el objeto map y el tipo de evento click, ejecutando una función que recibe dos parámetros (overlay,point). Recordamos que overlay es la marca sobre la que se ha pulsado, si es que se pulsó sobre una marca, y point es el punto donde se ha hecho clic del mapa, si es que se pulsó sobre un área vacía del mapa.
En la función empezamos con un if(point) que sirve para saber si hemos recibido un punto (Sólo recibimos el punto si se ha pulsado sobre un área vacía del mapa), porque sólo entonces queremos recolocar la marca. Entonces llamamos al método de la marca setPoint(point) para reposicionar la marca al punto recibido por parámetro.
Es bien simple ¿no? Podemos ver el ejemplo en marcha en este enlace.
Para acabar, os dejo el código completo de este ejercico:
<!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=llave"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(40,-4),3);
map.addControl(new GLargeMapControl());
map.setMapType(G_NORMAL_MAP);
var point = new GPoint (-4,40);
var marker = new GMarker(point);
map.addOverlay(marker);
GEvent.addListener(map, "click", function (overlay,point){
if (point){
marker.setPoint(point);
}
});
}
}
window.onload=load
//]]>
</script>
</head>
<body>
<div id="map" style="width: 765px; height: 388px"></div>
</body>
</html>
El evento que vamos a ver es el click en el objeto map, de la clase GMap2. En este caso, recuperaremos el punto donde se ha hecho click para colocar la marca en ese punto.
Primero veamos el código para crear el mapa con una marca:
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(40,-4),3);
map.addControl(new GLargeMapControl());
map.setMapType(G_NORMAL_MAP);
var point = new GPoint (-4,40);
var marker = new GMarker(point);
map.addOverlay(marker);
Este mapa, centrado en España, tiene una marca también en España. Ahora veamos el sencillo código para detectar un evento de tipo click sobre el mapa:
GEvent.addListener(map, "click", function (overlay,point){
if (point){
marker.setPoint(point);
}
});
Se crea el escuchador de eventos, para el objeto map y el tipo de evento click, ejecutando una función que recibe dos parámetros (overlay,point). Recordamos que overlay es la marca sobre la que se ha pulsado, si es que se pulsó sobre una marca, y point es el punto donde se ha hecho clic del mapa, si es que se pulsó sobre un área vacía del mapa.
En la función empezamos con un if(point) que sirve para saber si hemos recibido un punto (Sólo recibimos el punto si se ha pulsado sobre un área vacía del mapa), porque sólo entonces queremos recolocar la marca. Entonces llamamos al método de la marca setPoint(point) para reposicionar la marca al punto recibido por parámetro.
Es bien simple ¿no? Podemos ver el ejemplo en marcha en este enlace.
Para acabar, os dejo el código completo de este ejercico:
<!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=llave"
type="text/javascript"></script>
<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(40,-4),3);
map.addControl(new GLargeMapControl());
map.setMapType(G_NORMAL_MAP);
var point = new GPoint (-4,40);
var marker = new GMarker(point);
map.addOverlay(marker);
GEvent.addListener(map, "click", function (overlay,point){
if (point){
marker.setPoint(point);
}
});
}
}
window.onload=load
//]]>
</script>
</head>
<body>
<div id="map" style="width: 765px; height: 388px"></div>
</body>
</html>
Miguel Angel Alvarez
Fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Com...