Blog
Ver información de un marker en Google Maps
- Publicado por: admin
- Categoría: Blog HTML5 Java Script
No hay comentarios

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.

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.