Hasta ahora hemos diseñado mapas (con la API de Google) que obtienen la información de geolocalización cuando termina la carga de la página y allí terminaba todo, delegamos la navegación del mapa a la API de google, pero nuestro script actuaba de forma pasiva. Ahora te explicaremos como interactuar con el mapa, capturando los eventos del mapa podemos ofrecer interactividad al usuario.

 

Manejando Eventos

Los eventos son acciones del usuario ante la cual se puede realizar alguna tarea, función, proceso, etc. Estos se capturan mediante manejadores de eventos y son propagados desde el DOM hasta la API de google. Google Maps nos divide los eventos en 2 tipos:

  • Eventos de interfaz de usuario: Son los que responden a eventos generados por la interacción del usuario ( ratón, teclado), por ejemplo:
    • ‘click’
    • ‘dbclick’
    • ‘mouseup’
    • ‘mousedown’
    • ‘mouseover’
    • ‘mouseout’
  • Eventos de cambio de estado propios: Son los que responden a eventos generados cuando cambian alguna propiedad de la API de Google. Estos eventos se diferencian de los primeros ya que se llaman nombrePropiedad_changed, por ejemplo:
    • ‘animation_changed’
    • ‘cursor_changed’
    • ‘position_changed’
    • ‘visible_changed’

Para capturar los eventos y recibir las notificaciones, debemos registrarlos a través del controlador de eventos #addListener() disponible para todos las clases de Maps mediante el objeto “event”. Su sintáxis es la siguiente:

1
claseApi.event.addListener(Objeto, nombreEvento,funcionCallback);

Donde:

  • Objeto: Es el objeto al que capturamos los eventos.
  • nombreEvento: Es el evento a capturar.
  • funcionCallback: Función que se ejecutará al dispararse el evento del Objeto.

 

 

 Implementando la captura de eventos

Partimos del script que anteriormente hemos construido para el artículo “Geolocalización visual con Google Maps y HTML5“.

 

?

Descarga el código fuente

[button border_radius=’3′ bg_color=’#282d35′ to=’http://www.elclubdelprogramador.com/wp-content/resources/map_basic_google.zip’ style=’glass’] Descargar [/button]

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
<html>
<head>
<title>Local</title>
<script src="http://j.maxmind.com/app/geoip.js"></script>
<script src="http://maps.google.com/maps/api/js?sensor=false"></script>
<script type="text/javascript" >

if (navigator && navigator.geolocation) {
navigator.geolocation.getCurrentPosition(geoOK, geoKO);
} else {
geoMaxmind();
}
function geoOK(position) {
showMap(position.coords.latitude, position.coords.longitude);
}
function geoMaxmind() {
showMap(geoip_latitude(), geoip_longitude());
}

function geoKO(err) {
if (err.code == 1) {
error('El usuario ha denegado el permiso para obtener informacion de ubicacion.');
} else if (err.code == 2) {
error('Tu ubicacion no se puede determinar.');
} else if (err.code == 3) {
error('TimeOut.')
} else {
error('No sabemos que pasó pero ocurrio un error.');
}
}

function showMap(lat, longi) {

var myLatlng = new google.maps.LatLng(lat,longi);

var myOptions = {
zoom: 13,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP,
}
var map = new google.maps.Map(document.getElementById("mapa"), myOptions);

var marker = new google.maps.Marker({
position: myLatlng,
title:"Hola Mundo",
draggable:true,
animation: google.maps.Animation.BOUNCE
});

marker.setMap(map);

}

function error(msg) {
alert(msg);
}
</script>
</head>
<body>
<h1>Mapa</h1>
<div id="mapa" style="height: 450px"></div>
</body>
</html>

Ahora incluimos algunos listener que escucharán eventos:

1
2
3
4
5
6
7
8
9
google.maps.event.addListener(marker, 'dragend', function(event) {
alert( "Evento DragEnd - Latitude: "+event.latLng.lat()+" "+", longitude: "+event.latLng.lng() );

});

google.maps.event.addListener(marker, 'click', function(event) {
alert( "Evento Click");

});

 

¡Pruebalo! ¡Pruebalo! [button border_radius=’3′ bg_color=’#282d35′ to=’http://www.elclubdelprogramador.com/wp-content/resources/map_eventos.zip’ style=’glass’] Descargar Código [/button]

 

 

 

(Visited 186 times, 1 visits today)