Google Maps

Ver información de un marker en Google Maps

Anteriormente hemos viste cómo agregar markers en Google Maps, en este tutorial aprenderemos a ver información de un marker en Google Maps a través de una ventana, usando el objeto InfoWindow.

¿Cómo ver información de un marker en Google Maps al hacer click?

Esta funcionalidad la vamos a realizar sobre el código del anterior tutorial en el cual creamos el mapa de Google Maps:

<!DOCTYPE html>
<html style="height:100%">
  <head>
    <title>Ver información de 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);
         
        // Esta es la información del marker que se va a mostrar, el contenido acepta HTML
        var infowindow = new google.maps.InfoWindow({
          content: "<strong>Información de un marker</strong>"
        });
      
        // Creando un marker en el mapa
        var marker = new google.maps.Marker({
          position: new google.maps.LatLng(-34.5862088, -58.415677500000015),
          map: map,
          title: 'Título de ejemplo'
        });
         
        // Al hacer click sobre el marker mostraremos su información en una ventana
        marker.addListener('click', function() {
          infowindow.open(map, marker);
        });
      }
      
      // 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>

Es importante prestar atención al objeto InfoWindow, el cual contiene la información que se va a mostrar cundo se detecte el evento click sobre el marker.
Al ejecutar la página anterior y después de hacer click sobre el marker el resultado sería el siguiente.

Información de un marker en Google Maps

Información de un marker en Google Maps

Bueno gente, hemos llegado al final de este breve tutorial, espero que les sea de gran utilidad y 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 *