Ventanas de información

Selecciona la plataforma: Android iOS JavaScript

Ventana de información que aparece sobre un marcador.

Las ventanas de información te permiten mostrarle 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, abajo, el texto del fragmento de código.

El contenido de la ventana de información se define a través de las propiedades title y snippet del marcador. Cuando se hace clic en el marcador, no se muestra una ventana de información si las propiedades title y snippet están vacías o son nil.

Solo se muestra una de estas ventanas a la vez. Si un usuario presiona otro marcador, se ocultará la ventana que esté abierta 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, se cerrará y se volverá a abrir esa misma ventana.

Crea una ventana de información personalizada para agregar texto o imágenes adicionales. Una ventana de información personalizada te brinda control total sobre la apariencia de la ventana emergente.

Agrega una ventana de información

Con el siguiente fragmento, se crea un marcador simple que lleva solo 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 cadenas más extensas que el ancho de la ventana de información se ajustan automáticamente en varias líneas. Se truncarán los mensajes muy largos.

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;

Cómo ocultar o mostrar una ventana de información

Las ventanas de información están diseñadas para responder a eventos táctiles del usuario en el marcador. Para mostrar o ocultar una ventana de información de manera programática, configura la propiedad selectedMarker de GMSMapView:

  • Establece selectedMarker en el nombre del marcador para mostrarlo.
  • Establece selectedMarker en nil para ocultarla.

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

Establece tracksInfoWindowChanges en el marcador en YES o true si deseas que las nuevas propiedades o el contenido de la ventana de información se muestren de inmediato cuando se modifiquen, en lugar de tener que esperar hasta que la ventana de información se oculte y luego vuelva a aparecer. El valor predeterminado es NO o false.

Swift

london.tracksInfoWindowChanges = true

Objective-C

london.tracksInfoWindowChanges = YES;

Para decidir el momento en que configurarás la propiedad tracksInfoWindowChanges, debes evaluar las consideraciones de rendimiento y las ventajas de que la ventana de información se vuelva a dibujar automáticamente. Por ejemplo:

  • Si necesitas realizar una serie de modificaciones, puedes cambiar la propiedad a YES y, luego, volver a NO.
  • Cuando se ejecute una animación o se estén carguen contenidos de forma asíncrona, debes mantener la propiedad fijada en YES hasta que se completen las acciones.

Consulta también las notas que deben tenerse en cuenta cuando uses la propiedad iconView del marcador.

Cómo 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 respecto del marcador configurando la propiedad infoWindowAnchor. Esta propiedad acepta un CGPoint, definido como una desviación (x,y) en la que x e y varían de 0.0 a 1.0. La desviación predeterminada es (0.5, 0.0); es decir, el centro de la parte superior. Configurar la desviación de infoWindowAnchor resulta útil para alinear la ventana de información respecto de 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;

Cómo controlar eventos en ventanas de información

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

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

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

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 quieras. Por ejemplo, puedes usar instancias personalizadas de UILabel para mostrar el título y el texto del fragmento, y otras vistas, como instancias de UIImageView, para 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 un marcador está a punto de seleccionarse y te permite mostrar una instancia de tu clase UIView personalizada para definir la ventana de información personalizada que usa el marcador.

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.

Comparación de las distintas ventanas de información

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.