Etiqueta: marker

Como abrir una ventana con información a dar clic en nuestro marker #googlemaps #infoWindow

Para abrir una ventana al dar clic en un marker en los mapas de google maps debemos utilizar el objeto de nombre infoWindow. Para ello veamos el siguiente ejemplo:

Dar clic en el marker:

Código HTML

<div id="mapa" style="height:300px;">
</div>

Código Javascript

function initialize() {

//valores de mapa
  var myLatlng = new google.maps.LatLng(18.363882,-103.044922);
  var mapOptions = {
    zoom: 4,
    center: myLatlng
  };

  //creamos el mapa
  var map = new google.maps.Map(document.getElementById('mapa'), mapOptions);

  //contenido de nuestra ventana
  var contentString = '&lt;div id="content"&gt;'+
      'contenido feliz de una ventanita en el marker&lt;br&gt;'+
	    'contenido feliz de una ventanita en el marker&lt;br&gt;'+
		 'contenido feliz de una ventanita en el marker&lt;br&gt;'+
		  'contenido feliz de una ventanita en el marker&lt;br&gt;'+

      '&lt;/div&gt;';

  //info window
  var infowindow = new google.maps.InfoWindow({
      content: contentString
  });

  //variables de nuestro marker, contiene la ubicación del centro del mapa
  var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Titulo del marker'
  });

  //agregamos el evento para abrir el infowindow de nuestro marker
  google.maps.event.addListener(marker, 'click', function() {
    infowindow.open(map,marker);
  });
}

//ejecutamos la funcion que tiene todo nuestro codigo
initialize();