Ventanas de información

Seleccionar plataforma: Android iOS JavaScript
  1. Introducción
  2. Cómo agregar una ventana de información
  3. Cómo abrir una ventana de información
  4. Cómo cerrar una ventana de información
  5. Cómo mover una ventana de información

Introducción

Un objeto InfoWindow muestra contenido (por lo general, texto o imágenes) en una ventana emergente sobre el mapa, en una ubicación determinada. La ventana de información tiene un área de contenido y un tallo cónico. La punta del tallo se adjunta a una ubicación específica en el mapa. Las ventanas de información aparecen como un diálogo para los lectores de pantalla.

Una ventana de información que muestra información sobre una ubicación en Australia

Por lo general, se adjunta una ventana de información a un marcador, pero también se puede adjuntar una ventana de información a una latitud y longitud específicas, como se describe en la sección sobre cómo agregar una ventana de información a continuación.

En términos generales, las ventanas de información son una clase de superposición. Para obtener información sobre otros tipos de superposiciones, consulta Cómo dibujar en el mapa.

Agrega una ventana de información

El constructor InfoWindow toma un literal de objeto InfoWindowOptions, que especifica los parámetros iniciales para mostrar la ventana de información.

El literal de objeto InfoWindowOptions contiene los siguientes campos:

  • content contiene una string de texto o un nodo del DOM para mostrar en la ventana de información.
  • pixelOffset contiene un desplazamiento desde la punta de la ventana de información hasta la ubicación en la que se ancla. En la práctica, no es necesario que especifiques este campo. Puedes dejar el valor predeterminado.
  • position contiene el LatLng en el que se ancla esta ventana de información. Nota: Se puede adjuntar un objeto InfoWindow a un objeto Marker (en cuyo caso, su posición se basa en la ubicación del marcador) o en el mapa, en un LatLng especificado. Una forma de recuperar un LatLng es con el servicio de geocodificación. Al abrir una ventana de información en un marcador, se actualizará automáticamente el position.
  • maxWidth especifica el ancho máximo de la ventana de información en píxeles. De forma predeterminada, una ventana de información se expande para adaptarse a su contenido y ajusta automáticamente el texto si la ventana de información llena el mapa. Si agregas un maxWidth, la ventana de información se ajustará automáticamente para aplicar el ancho especificado. Si alcanza el ancho máximo y hay espacio vertical en la pantalla, la ventana de información puede expandirse verticalmente.

El contenido de InfoWindow puede incluir una string de texto, un fragmento de HTML o un elemento DOM. Para configurar el contenido, especifícalo dentro de InfoWindowOptions o llama a setContent() en InfoWindow de manera explícita.

Si deseas ajustar el tamaño del contenido de forma explícita, puedes colocarlo en un elemento <div> y definir el estilo de <div> con CSS. También puedes usar CSS para habilitar el desplazamiento. Ten en cuenta que, si no habilitas el desplazamiento y el contenido excede el espacio disponible en la ventana de información, es posible que el contenido se salga de ella.

Abrir una ventana de información

Cuando creas una ventana de información esta no aparece automáticamente en el mapa. Para que la ventana de información sea visible, debes llamar al método open() en el InfoWindow y pasar un literal de objeto InfoWindowOpenOptions que especifique las siguientes opciones:

  • map especifica el mapa o la panorámica de Street View en la que se abrirá.
  • anchor contiene un punto de anclaje (por ejemplo, un Marker). Si la opción anchor es null o no definida, la ventana de información se abrirá en su propiedad position.
  • shouldFocus especifica si el enfoque debe moverse o no dentro de la ventana de información cuando se abre.

TypeScript

// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.

function initMap(): void {
  const uluru = { lat: -25.363, lng: 131.044 };
  const map = new google.maps.Map(
    document.getElementById("map") as HTMLElement,
    {
      zoom: 4,
      center: uluru,
    }
  );

  const contentString =
    '<div id="content">' +
    '<div id="siteNotice">' +
    "</div>" +
    '<h1 id="firstHeading" class="firstHeading">Uluru</h1>' +
    '<div id="bodyContent">' +
    "<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large " +
    "sandstone rock formation in the southern part of the " +
    "Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) " +
    "south west of the nearest large town, Alice Springs; 450&#160;km " +
    "(280&#160;mi) by road. Kata Tjuta and Uluru are the two major " +
    "features of the Uluru - Kata Tjuta National Park. Uluru is " +
    "sacred to the Pitjantjatjara and Yankunytjatjara, the " +
    "Aboriginal people of the area. It has many springs, waterholes, " +
    "rock caves and ancient paintings. Uluru is listed as a World " +
    "Heritage Site.</p>" +
    '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' +
    "https://en.wikipedia.org/w/index.php?title=Uluru</a> " +
    "(last visited June 22, 2009).</p>" +
    "</div>" +
    "</div>";

  const infowindow = new google.maps.InfoWindow({
    content: contentString,
  });

  const marker = new google.maps.Marker({
    position: uluru,
    map,
    title: "Uluru (Ayers Rock)",
  });

  marker.addListener("click", () => {
    infowindow.open({
      anchor: marker,
      map,
      shouldFocus: false,
    });
  });
}

declare global {
  interface Window {
    initMap: () => void;
  }
}
window.initMap = initMap;

JavaScript

// This example displays a marker at the center of Australia.
// When the user clicks the marker, an info window opens.
function initMap() {
  const uluru = { lat: -25.363, lng: 131.044 };
  const map = new google.maps.Map(document.getElementById("map"), {
    zoom: 4,
    center: uluru,
  });
  const contentString =
    '<div id="content">' +
    '<div id="siteNotice">' +
    "</div>" +
    '<h1 id="firstHeading" class="firstHeading">Uluru</h1>' +
    '<div id="bodyContent">' +
    "<p><b>Uluru</b>, also referred to as <b>Ayers Rock</b>, is a large " +
    "sandstone rock formation in the southern part of the " +
    "Northern Territory, central Australia. It lies 335&#160;km (208&#160;mi) " +
    "south west of the nearest large town, Alice Springs; 450&#160;km " +
    "(280&#160;mi) by road. Kata Tjuta and Uluru are the two major " +
    "features of the Uluru - Kata Tjuta National Park. Uluru is " +
    "sacred to the Pitjantjatjara and Yankunytjatjara, the " +
    "Aboriginal people of the area. It has many springs, waterholes, " +
    "rock caves and ancient paintings. Uluru is listed as a World " +
    "Heritage Site.</p>" +
    '<p>Attribution: Uluru, <a href="https://en.wikipedia.org/w/index.php?title=Uluru&oldid=297882194">' +
    "https://en.wikipedia.org/w/index.php?title=Uluru</a> " +
    "(last visited June 22, 2009).</p>" +
    "</div>" +
    "</div>";
  const infowindow = new google.maps.InfoWindow({
    content: contentString,
  });
  const marker = new google.maps.Marker({
    position: uluru,
    map,
    title: "Uluru (Ayers Rock)",
  });

  marker.addListener("click", () => {
    infowindow.open({
      anchor: marker,
      map,
      shouldFocus: false,
    });
  });
}

window.initMap = initMap;
Ver ejemplo

Probar la muestra

En el siguiente ejemplo, se establece el maxWidth de una ventana de información: ver ejemplo.

Establecer el foco en una ventana de información

Para establecer el enfoque en una ventana de información, llama al método focus(). Considera usar este método junto con un evento visible antes de establecer el enfoque. Llamar a este método en una ventana de información no visible no tendrá ningún efecto. Llama a open() para que sea visible una ventana de información.

Cerrar una ventana de información

De forma predeterminada, una ventana de información permanece abierta hasta que el usuario hace clic en el control de cierre (una cruz en la esquina superior derecha de la ventana de información) o presiona la tecla ESC. También puedes cerrar la ventana de información de manera explícita llamando al método close().

Cuando se cierra una ventana de información, el foco regresa al elemento que había estado enfocado antes de que se abriera. Si ese elemento no está disponible, se volverá a enfocar el mapa. Para anular este comportamiento, puedes escuchar el evento closeclick y administrar el enfoque de forma manual, como se muestra en el siguiente ejemplo:

infoWindow.addListener('closeclick', ()=>{
  // Handle focus manually.
});

Mover una ventana de información

Existen dos maneras de modificar la ubicación de una ventana de información:

  • Llama a setPosition() en la ventana de información.
  • Adjunta la ventana de información a un nuevo marcador con el método InfoWindow.open(). Nota: Si llamas a open() sin pasar un marcador, InfoWindow usará la posición especificada durante la construcción a través del literal de objeto InfoWindowOptions.

Personalización

La clase InfoWindow no ofrece personalización. En su lugar, consulta el ejemplo de ventana emergente personalizada para ver cómo crear una ventana emergente completamente personalizada.