Blog
Ver información de un marker en Google Maps
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.