El programa Google Maps JavaScript puede responder a diversos eventos generados por el usuario. Este capítulo proporciona ejemplos que demuestran cómo realizar la gestión de eventos mientras se trabaja con Google Maps.
Adición de un detector de eventos
Puede añadir un detector de eventos con el método addListener (). Acepta parámetros como el nombre del objeto sobre el que queremos añadir el oyente, nombre del evento y el evento manejador.
Ejemplo
El siguiente ejemplo muestra cómo añadir un detector de eventos con un objeto marcador. El programa plantea el valor de zoom del mapa por 5 cada vez que haga doble clic en el marcador.
<!DOCTYPE html>
<html>
<head>
<script src = "http://maps.googleapis.com/maps/api/js"></script>
<script>
var myCenter = new google.maps.LatLng(17.433053, 78.412172);
function loadMap(){
var mapProp = {
center: myCenter,
zoom:5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new google.maps.Marker({
position: myCenter,
title:'Click to zoom'
});
marker.setMap(map);
//Zoom to 7 when clicked on marker
google.maps.event.addListener(marker,'click',function() {
map.setZoom(9);
map.setCenter(marker.getPosition());
});
}
</script>
</head>
<body onload = "loadMap()">
<div id = "googleMap" style = "width:580px; height:400px;"></div>
</body>
</html>
Se produce la siguiente salida -
Abrir una ventana de información sobre Click
El código siguiente abre una ventana de información al hacer clic en el marcador -
<!DOCTYPE html>
<html>
<head>
<script src = "http://maps.googleapis.com/maps/api/js"></script>
<script>
var myCenter = new google.maps.LatLng(17.433053, 78.412172);
function loadMap(){
var mapProp = {
center:myCenter,
zoom:4,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content:"Hi"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
</script>
</head>
<body onload = "loadMap()">
<div id = "googleMap" style = "width:580px; height:400px;"></div>
</body>
</html>
Se produce la siguiente salida -
Extracción del Oyente
Puede eliminar un oyente existente utilizando el método removeListener ().Este método acepta el objeto detector, por lo tanto, tenemos que asignar al oyente a una variable y pasarlo a este método.
Ejemplo
El siguiente código muestra cómo quitar un oyente -
<!DOCTYPE html>
<html>
<head>
<script src = "http://maps.googleapis.com/maps/api/js"></script>
<script>
var myCenter = new google.maps.LatLng(17.433053, 78.412172);
function loadMap(){
var mapProp = {
center:myCenter,
zoom:4,
mapTypeId:google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("googleMap"),mapProp);
var marker = new google.maps.Marker({
position:myCenter,
});
marker.setMap(map);
var infowindow = new google.maps.InfoWindow({
content:"Hi"
});
var myListener = google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
google.maps.event.removeListener(myListener);
}
</script>
</head>
<body onload = "loadMap()">
<div id = "googleMap" style = "width:580px; height:400px;"></div>
</body>
</html>
Se produce la siguiente salida -
No hay comentarios.:
Publicar un comentario