Ventanas de información

Seleccionar plataforma: Android iOS JavaScript

Una ventana de información te permite mostrar información al usuario cuando este presiona un marcador.

Las ventanas de información siempre se dibujan respecto de la pantalla del dispositivo, centradas encima del marcador asociado. La ventana de información predeterminada contiene el título en negrita y el texto del fragmento debajo de este.

El contenido de la ventana de información se define a través de las propiedades title y snippet del marcador. Si haces clic en el marcador, no se mostrará la ventana de información si las propiedades title y snippet están en blanco o nil.

Solo se muestra una de estas ventanas a la vez. Si un usuario presiona otro marcador, se ocultará la ventana actual y se abrirá la ventana de información nueva. Si el usuario hace clic en un marcador que actualmente muestra una ventana de información, esa ventana de información se cierra y se vuelve a abrir.

Crea una ventana de información personalizada para agregar texto o imágenes adicionales. Una ventana de información personalizada te permite controlar por completo la apariencia de la ventana emergente.

Agrega una ventana de información

En el siguiente fragmento, se crea un marcador simple que solo tiene un título para el texto de la ventana de información.

Swift

let position = CLLocationCoordinate2D(latitude: 51.5, longitude: -0.127)
let london = GMSMarker(position: position)
london.title = "London"
london.map = mapView
      

Objective‑C

CLLocationCoordinate2D position = CLLocationCoordinate2DMake(51.5, -0.127);
GMSMarker *london = [GMSMarker markerWithPosition:position];
london.title = @"London";
london.map = mapView;
      

Con la propiedad snippet, puedes agregar texto adicional que aparecerá debajo del título en una fuente más pequeña. Las strings más extensas que el ancho de la ventana de información se ajustan automáticamente en varias líneas. Los mensajes muy largos pueden truncarse.

Swift

london.title = "London"
london.snippet = "Population: 8,174,100"
london.map = mapView
      

Objective‑C

london.title = @"London";
london.snippet = @"Population: 8,174,100";
london.map = mapView;
      

Mostrar/ocultar una ventana de información

Las ventanas de información están diseñadas para responder a los eventos táctiles de los usuarios en el marcador. Puedes ocultar o mostrar una ventana de información de manera programática si configuras la propiedad selectedMarker de GMSMapView:

• Configura selectedMarker con el nombre del marcador para mostrarlo.
• Configura selectedMarker como nil para ocultarlo.

Swift

london.title = "London"
london.snippet = "Population: 8,174,100"
london.map = mapView
// Show marker
mapView.selectedMarker = london
// Hide marker
mapView.selectedMarker = nil
      

Objective‑C

london.title = @"London";
london.snippet = @"Population: 8,174,100";
london.map = mapView;
// Show marker
mapView.selectedMarker = london;
// Hide marker
mapView.selectedMarker = nil;
      

Cómo configurar una ventana de información para que se actualice automáticamente

Configura tracksInfoWindowChanges en el marcador en YES o true si deseas que las propiedades nuevas o el contenido de la ventana de información se muestren de inmediato cuando se modifican, en lugar de tener que esperar a que se oculte la ventana de información y volver a mostrarla. El valor predeterminado es NO o false.

Swift

london.tracksInfoWindowChanges = true
      

Objective‑C

london.tracksInfoWindowChanges = YES;
      

Para decidir cuándo configurar la propiedad tracksInfoWindowChanges, debes comparar las consideraciones de rendimiento con las ventajas de que la ventana de información se vuelva a dibujar de manera automática. Por ejemplo:

• Si tienes que realizar una serie de cambios, puedes cambiar la propiedad a YES y, luego, volver a NO.
• Cuando se ejecuta una animación o se están cargando contenidos de forma asíncrona, debes mantener la propiedad establecida en YES hasta que se completen las acciones.

Consulta también las notas para la consideración cuando uses la propiedad iconView del marcador.

Cambiar la posición de una ventana de información

Las ventanas de información siempre se dibujan respecto de la pantalla del dispositivo, centradas encima del marcador asociado. Puedes modificar la posición de la ventana de información relacionada con el marcador si configuras la propiedad infoWindowAnchor. Esta propiedad acepta un objeto CGPoint, definido como un desplazamiento (x,y) en el que x e y varían entre 0.0 y 1.0. El desplazamiento predeterminado es (0.5, 0.0), es decir, el centro de la parte superior. Configurar el desplazamiento de infoWindowAnchor resulta útil para alinear la ventana de información con un ícono personalizado.

Swift

london.infoWindowAnchor = CGPoint(x: 0.5, y: 0.5)
london.icon = UIImage(named: "house")
london.map = mapView
      

Objective‑C

london.infoWindowAnchor = CGPointMake(0.5, 0.5);
london.icon = [UIImage imageNamed:@"house"];
london.map = mapView;
      

Controla eventos en ventanas de información

Puedes escuchar los siguientes eventos de la ventana de información:

• mapView:markerInfoWindow:: Se llama cuando se selecciona un marcador. De manera opcional, puede mostrar una ventana de información personalizada, como un UIView, para usar en el marcador. Consulta Ventanas de información personalizadas a continuación para obtener más información.

• mapView:markerInfoContents:: Se lo llama cuando mapView:markerInfoWindow muestra "nil".

• mapView:didCloseInfoWindowOfMarker:: Se llama cuando se cierra la ventana de información del marcador.

• mapView:didLongPressInfoWindowOfMarker:: Se llama después de que se mantiene presionada la ventana de información del marcador.

Para escuchar eventos, debes implementar el protocolo GMSMapViewDelegate. Consulta la guía de eventos y la lista de métodos en GMSMapViewDelegate.

GitHub incluye muestras que muestran cómo controlar los eventos de la ventana de información:

• Objective‐C
• Swift

Ventanas de información personalizadas

Para personalizar el contenido de las ventanas de información, crea una subclase de UIView que defina el diseño de la ventana de información personalizada. En esa subclase, define la vista como desees. Por ejemplo, puedes usar instancias UILabel personalizadas para mostrar el texto del título y el fragmento, y otras vistas, como las instancias de UIImageView, a fin de agregar imágenes que se muestran en la ventana de información.

Asegúrate de que tu ViewController implemente el protocolo GMSIndoorDisplayDelegate y defina un objeto de escucha para el evento mapView:markerInfoWindow:. Se llama a este objeto de escucha de eventos cuando se selecciona un marcador y se te permite mostrar una instancia de tu clase UIView personalizada para definir la ventana de información personalizada que usa el marcador.

Nota: La ventana de información dibujada no es una vista en vivo. En el momento en que se muestra, la vista se procesa como una imagen. Cualquier cambio posterior en la vista no se reflejará en la ventana de información del mapa. Configura tracksInfoWindowChanges en el marcador en YES o true si deseas que las propiedades nuevas o el contenido de la ventana de información se muestren de inmediato cuando se modifican, como se muestra más arriba en Cómo configurar una ventana de información para que se actualice de forma automática.

En las siguientes imágenes, se muestran tres ventanas de información: una predeterminada, otra con contenido personalizado y otra con el marco y el fondo personalizados.

Las muestras de código en GitHub que se proporcionan con el SDK de Maps para iOS incluyen muestras de ventanas de información personalizadas. Por ejemplo, consulta la definición de MarkerInfoWindowViewController.m (Objective-C) o MarkerInfoWindowViewController.swift (Swift).

Consulta las muestras de código para obtener información sobre cómo descargar y ejecutar estas muestras.