Blog
Evento click sobre un marker en Google Maps
No hay comentarios
La API Google Maps es actualmente muy utilizada por los programadores de sitios webs y aplicaciones móviles, ya que nos ofrece miles de funcionalidades interesantes para trabajar. En este tutorial aprenderemos a crear un evento click sobre un marker en Google Maps.
¿Cómo crear un evento click sobre un marker en Google Maps?
Para registrar un evento click sobre un marker vamos a utilizar la función addListener, la cual recibe como parámetro el tipo de evento y la función a ejecutar. En el siguiente ejemplo se puede apreciar como funciona:
<!DOCTYPE html>
<html style="height:100%">
<head>
<title>Evento click sobre un marker en Google Maps</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
html, body{
height:100%;
margin: 0px;
}
#googleMap{
width:100%;
height:100%;
}
</style>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
// Configuración del mapa
var mapProp = {
center: new google.maps.LatLng(-34.5862088, -58.415677500000015),
zoom: 16,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
// Agregando el mapa al tag de id googleMap
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp);
// Creando un marker en el mapa
var marker = new google.maps.Marker({
position: new google.maps.LatLng(-34.5862088, -58.415677500000015),
map: map,
title: 'Hello World!'
});
// Evento click sobre el marker creado
marker.addListener('click', function() {
map.setZoom(8);
map.setCenter(marker.getPosition());
});
}
// Inicializando el mapa cuando se carga la página
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="googleMap"></div>
</body>
</html>
Simplemente al hacer click sobre el marker se va a cambiar el zoom del mapa, manteniendo el centro.
Bueno gente, espero que les sea de gran utilidad este tutorial. Ante cualquier problema no duden en dejar un comentario.