Manejar un evento en un mapa de Google para reposicionar una marca

  • Por
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>

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Compartir

Comentarios

pinyo22

08/1/2008
Y como se mostrarian en lugar de una marca una polilinea??? concretamente un track de GPS. Gracias.

sharly

02/3/2009
Muy interesenta todo el material. Muy claro explicado y fácil de usar. Mi más enhorabuena por tu esfuerzo.

hazael

05/1/2012
pregunta
como puedo hacer esto mismo pero que la marca anterior no se pierda... es decir que cada que se de un click al mapa se ponga una nueva marca sin perder la anterior...

vito_guerrero_quesada

08/3/2012
Conversion a V3
Hola, he intentado traducir esto a la version V3 pero no me funciona bien, podrias explicar la parte donde se borra la marca existente y se genera la nueva.