Fenêtres d'informations

Une fenêtre d'informations vous permet d'afficher des informations lorsque l'utilisateur appuie sur un repère.

Une fenêtre d'informations est orientée vers l'écran de l'appareil, centrée au-dessus du repère associé. La fenêtre d'informations par défaut contient le titre en gras et le texte de l'extrait sous le titre.

Le contenu de la fenêtre d'informations est défini par les propriétés title et snippet du repère. Lorsque l'utilisateur clique sur le repère, une fenêtre d'informations ne s'affiche pas si les propriétés title et snippet sont vides ou nil.

Une seule fenêtre d'informations s'affiche à la fois. Si un utilisateur appuie sur un autre repère, la fenêtre actuelle est masquée et la nouvelle fenêtre d'informations s'ouvre. Si l'utilisateur clique sur un repère qui affiche actuellement une fenêtre d'informations, celle-ci se ferme et se rouvre.

Créez une fenêtre d'informations personnalisée pour y ajouter du texte ou des images. Une fenêtre d'informations personnalisée vous permet de contrôler complètement l'apparence de la fenêtre pop-up.

Ajouter une fenêtre d'informations

L'extrait de code suivant crée un repère simple, avec uniquement un titre pour le texte de la fenêtre d'informations.

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;
      

Avec la propriété snippet, vous pouvez ajouter du texte supplémentaire qui s'affichera sous le titre dans une police plus petite. Les chaînes plus longues que la fenêtre d'informations sont automatiquement encapsulées sur plusieurs lignes. Les messages très longs peuvent être tronqués.

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

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

Afficher/Masquer une fenêtre d'informations

Les fenêtres d'informations sont conçues pour répondre aux événements tactiles de l'utilisateur sur le repère. Vous pouvez afficher ou masquer une fenêtre d'informations par programmation en définissant la propriété selectedMarker de GMSMapView:

• Définissez selectedMarker sur le nom du repère pour l'afficher.
• Définissez selectedMarker sur nil pour le masquer.

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;
      

Définir une fenêtre d'informations pour s'actualiser automatiquement

Définissez tracksInfoWindowChanges sur le repère sur YES ou true si vous souhaitez que les nouvelles propriétés ou le contenu de la fenêtre d'informations s'affichent immédiatement lorsqu'ils sont modifiés, au lieu d'attendre que la fenêtre d'informations soit masquée, puis de nouveau affichée. La valeur par défaut est NO ou false.

london.tracksInfoWindowChanges = true
      

london.tracksInfoWindowChanges = YES;
      

Pour décider du moment où définir la propriété tracksInfoWindowChanges, vous devez évaluer les considérations de performances et les avantages de la redéfinition automatique de la fenêtre d'informations. Exemple :

• Si vous devez apporter une série de modifications, vous pouvez remplacer la propriété par YES, puis revenir à NO.
• Lorsqu'une animation est en cours d'exécution ou que le contenu est chargé de manière asynchrone, vous devez conserver la propriété YES jusqu'à la fin des actions.

Consultez également les remarques à prendre en compte lorsque vous utilisez la propriété iconView du repère.

Modifier la position d'une fenêtre d'informations

Une fenêtre d'informations est orientée par rapport à l'écran de l'appareil, centrée au-dessus du repère auquel elle est associée. Vous pouvez modifier la position de la fenêtre d'informations par rapport au repère en définissant la propriété infoWindowAnchor. Cette propriété accepte un CGPoint, défini comme un décalage (x,y) où x et y sont compris entre 0,0 et 1,0. Le décalage par défaut est (0,5, 0,0), c'est-à-dire au centre en haut. Définir le décalage infoWindowAnchor permet d'aligner la fenêtre d'informations avec une icône personnalisée.

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;
      

Gérer les événements sur les fenêtres d'informations

Vous pouvez écouter les événements suivants dans la fenêtre d'informations:

• mapView:markerInfoWindow: : appelé lorsqu'un repère est sur le point d'être sélectionné. Vous pouvez éventuellement renvoyer une fenêtre d'informations personnalisée, en tant que UIView, à utiliser pour le repère. Pour en savoir plus, consultez Fenêtres d'informations personnalisées ci-dessous.

• mapView:markerInfoContents: : appelé lorsque mapView:markerInfoWindow renvoie "nil".

• mapView:didCloseInfoWindowOfMarker: : appelé lorsque la fenêtre d'informations du repère est fermée.

• mapView:didLongPressInfoWindowOfMarker: : appelé après que l'utilisateur a appuyé de manière prolongée sur la fenêtre d'informations d'un repère.

Pour écouter des événements, vous devez implémenter le protocole GMSMapViewDelegate. Consultez le guide des événements et la liste des méthodes sur GMSMapViewDelegate.

GitHub inclut des exemples qui montrent comment gérer les événements de la fenêtre d'informations:

• Objective-C
• Swift

Fenêtres d'informations personnalisées

Personnalisez le contenu des fenêtres d'informations en créant une sous-classe de UIView qui définit la mise en page de la fenêtre d'informations personnalisée. Dans cette sous-classe, définissez la vue comme vous le souhaitez. Par exemple, vous pouvez utiliser des instances UILabel personnalisées pour afficher le titre et le texte des extraits et d'autres vues, telles que les instances UIImageView, afin d'ajouter des images affichées dans la fenêtre d'informations.

Assurez-vous que votre ViewController implémente le protocole GMSIndoorDisplayDelegate et définit un écouteur pour l'événement mapView:MarkerInfoWindow:. Cet écouteur d'événements est appelé lorsqu'un repère est sur le point d'être sélectionné. Il vous permet de renvoyer une instance de votre classe UIView personnalisée afin de définir la fenêtre d'informations personnalisée utilisée par le repère.

Les images ci-dessous montrent une fenêtre d'informations par défaut, une fenêtre d'informations avec du contenu personnalisé, et une fenêtre d'informations avec un cadre et un arrière-plan personnalisés.

Les exemples de code sur GitHub fournis avec le SDK Maps pour iOS incluent des exemples de fenêtres d'informations personnalisées. Reportez-vous par exemple à la définition du MarkerInfoWindowViewController.m (Objective-C) ou de MarkerInfoWindowViewController.swift (Swift).

Consultez les exemples de code pour en savoir plus sur le téléchargement et l'exécution de ces exemples.