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.

Compartir esto:

Aboutadmin

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 *