Ventanas de información

Las ventanas de información te permiten mostrar datos a los usuarios cuando presionan un marcador.

Las ventanas de información se dibujan orientadas 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 del título.

El contenido de la ventana de información se define mediante las propiedades title y snippet del marcador. Si haces clic en el marcador, no se mostrará una 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 nueva. Si el usuario hace clic en un marcador que actualmente muestra una ventana de información, esta se cierra y se vuelve a abrir.

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

Agrega una ventana de información

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

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

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 que superan el ancho de la ventana de información se ajustan automáticamente en varias líneas. Es posible que se trunquen los mensajes muy largos.

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

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 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:

• Establece selectedMarker en el nombre del marcador para que se muestre.
• Establece selectedMarker en nil para ocultarlo.

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

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 quieres 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 a que la ventana de información se oculte y vuelva a mostrar. El valor predeterminado es NO o false.

london.tracksInfoWindowChanges = true
      

london.tracksInfoWindowChanges = YES;
      

Para decidir cuándo configurar la propiedad tracksInfoWindowChanges, debes sopesar las consideraciones de rendimiento con respecto a las ventajas de que la ventana de información se vuelva a dibujar automáticamente. 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 cargan contenidos de forma asíncrona, debes mantener la propiedad establecida en YES hasta que se completen las acciones.

Consulta también las notas que debes tener 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. Si deseas modificar la posición de la ventana de información en relación con el marcador, configura la propiedad infoWindowAnchor. Esta propiedad acepta un 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 superior. Configurar el desplazamiento de infoWindowAnchor es útil para alinear la ventana de información con un ícono personalizado.

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

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

Cómo controlar eventos en las ventanas de información

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

• mapView:markerInfoWindow:: Se llama cuando un marcador está a punto de seleccionarse. De manera opcional, puede mostrar una ventana de información personalizada, como un elemento UIView, para usar con el marcador. Consulta la sección Ventanas de información personalizadas a continuación para obtener más información.

• mapView:markerInfoContents:: Se 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 mantener presionada la ventana de información de un marcador.

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

GitHub incluye ejemplos 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 quieras. Por ejemplo, puedes usar instancias personalizadas de UILabel para mostrar el texto del título y 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.

En las muestras de código en GitHub, que se proporcionan con el SDK de Maps para iOS, se 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.