Google Maps API

Evento click sobre un marker en Google Maps

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.

Compartilo en
Share on FacebookTweet about this on TwitterShare on Google+Share on LinkedInPin on PinterestEmail this to someone

AboutJosé Di Meglio

Apasionado de la tecnología y programación. Aportando información gratuita sobre el mundo de la informática.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *