Ajouter une carte à votre application iOS (Objective-C)

1. Avant de commencer

Résumé

Dans cet atelier de programmation, vous apprendrez tout ce qu'il faut savoir pour créer des applications iOS dans Objective-C si vous débutez avec Google Maps Platform. Vous découvrirez toutes les bases : configurer et charger le SDK Maps pour iOS, afficher votre première carte, utiliser les repères et les regrouper, dessiner sur la carte et gérer les interactions des utilisateurs.

Objectifs de l'atelier

Dans cet atelier de programmation, vous allez créer une application iOS qui :

charge le SDK Maps pour iOS et sa bibliothèque d'utilitaires ;
affiche une carte centrée sur Sydney, en Australie ;
affiche des repères personnalisés pour 100 points autour de Sydney ;
implémente le regroupement de repères ;
recentre la carte et trace un cercle lorsque l'utilisateur interagit en cliquant sur un repère.

Points abordés

Premiers pas avec Google Maps Platform
Charger le SDK Maps pour iOS et sa bibliothèque d'utilitaires
Charger une carte
Utiliser des repères par défaut et personnalisés, et les regrouper
Utiliser le système d'événements du SDK Maps pour iOS afin d'interagir avec l'utilisateur
Contrôler la carte via le programmatique
Dessiner sur la carte

Conditions préalables

Vous devez vous familiariser avec les outils ci-dessous pour suivre cet atelier de programmation. Si vous maîtrisez déjà Google Maps Platform, passez directement à l'atelier !

Produits Google Maps Platform requis

Dans cet atelier de programmation, vous utiliserez les produits Google Maps Platform suivants :

SDK Maps pour iOS
Bibliothèque d'utilitaires du SDK Google Maps pour iOS

Premiers pas avec Google Maps Platform

Si vous n'avez jamais utilisé Google Maps Platform, suivez le guide Premiers pas avec Google Maps Platform ou regardez la playlist de démarrage avec Google Maps Platform pour effectuer les étapes suivantes :

Créer un compte de facturation
Créer un projet
Activer les SDK et les API Google Maps Platform (listés dans la section précédente)
Générer une clé API

Autres conditions requises pour cet atelier de programmation

Pour suivre cet atelier de programmation, vous aurez besoin des comptes, des services et des outils suivants :

Compte Google Cloud Platform pour lequel la facturation est activée
Clé API Google Maps Platform avec le SDK Maps pour iOS activé
Connaissances de base en Objective-C
Xcode 12.0 avec un SDK cible 12.0 ou une version ultérieure

2. Configuration

Pour réaliser l'étape ci-dessous, vous devez activer le SDK Maps pour iOS.

Configurer Google Maps Platform

Si vous ne disposez pas encore d'un compte Google Cloud Platform et d'un projet pour lequel la facturation est activée, consultez le guide Premiers pas avec Google Maps Platform pour savoir comment créer un compte de facturation et un projet.

Dans Cloud Console, cliquez sur le menu déroulant des projets, puis sélectionnez celui que vous souhaitez utiliser pour cet atelier de programmation.

Activez les API et les SDK Google Maps Platform requis pour cet atelier de programmation dans Google Cloud Marketplace. Pour ce faire, suivez les étapes indiquées dans cette vidéo ou dans cette documentation.
Générez une clé API sur la page Identifiants de Cloud Console. Vous pouvez suivre la procédure décrite dans cette vidéo ou dans cette documentation. Toutes les requêtes envoyées à Google Maps Platform nécessitent une clé API.

Configurer le modèle de projet initial

Avant de commencer cet atelier de programmation, procédez comme suit pour télécharger le modèle de projet initial et le code complet de la solution :

Téléchargez ou dupliquez le dépôt GitHub de cet atelier de programmation depuis https://github.com/googlecodelabs/maps-platform-101-objc.

Le projet StarterApp se trouve dans le répertoire /starter et inclut la structure de base de fichier dont vous avez besoin pour l'atelier de programmation. Tous les éléments avec lesquels vous devez travailler se trouvent dans le répertoire /starter/StarterApp.

Si vous souhaitez exécuter le code complet de la solution, vous pouvez effectuer les étapes de configuration ci-dessus et voir le résultat dans le répertoire /solution/SolutionApp.

3. Installer le SDK Maps pour iOS

Pour utiliser le SDK Maps pour iOS, vous devez d'abord installer les dépendances nécessaires. Ce processus se déroule en deux étapes : installer le SDK Maps pour iOS et sa bibliothèque d'utilitaires à partir du gestionnaire de dépendances CocoaPods, et fournir votre clé API au SDK.

Ajoutez le SDK Maps pour iOS et sa bibliothèque d'utilitaires dans Podfile.

Dans cet atelier de programmation, vous allez utiliser le SDK Maps pour iOS, qui fournit toutes les fonctionnalités principales de Google Maps, et la bibliothèque d'utilitaires iOS de Maps, qui propose divers utilitaires pour enrichir votre carte, y compris regrouper des repères.

Pour commencer, dans Xcode (ou dans l'éditeur de texte de votre choix), ouvrez Pods > Podfile et modifiez le fichier afin d'inclure les dépendances correspondant au SDK Maps pour iOS et à la bibliothèque d'utilitaires sous use_frameworks! :

pod 'GoogleMaps'
pod 'Google-Maps-iOS-Utils'

Installez les pods du SDK Maps pour iOS et de sa bibliothèque d'utilitaires.

Pour installer les dépendances, exécutez pod install dans le répertoire /starter à partir de la ligne de commande. CocoaPods téléchargera automatiquement les dépendances et créera StarterApp.xcworkspace. 3. Une fois vos dépendances installées, ouvrez StarterApp.xcworkspace dans Xcode, puis exécutez l'application dans le simulateur d'iPhone en appuyant sur Command+R. Si tous les paramètres sont correctement configurés, le simulateur se lance et affiche un écran noir. Ne vous inquiétez pas, comme vous n'avez rien compilé encore, c'est normal ! 4. Importez le SDK dans AppDelegate.h.

Maintenant que vos dépendances sont installées, vous pouvez fournir votre clé API au SDK. La première étape consiste à importer le SDK Maps pour iOS en tant que dépendance en ajoutant la ligne suivante sous l'instruction d'importation #import "AppDelegate.h" :

@import GoogleMaps;

Sous l'instruction d'importation du SDK iOS, déclarez une constante NSString avec la valeur définie sur votre clé API :

static NSString *const kMapsAPIKey = @"YOUR API KEY";

Transmettez la clé API au SDK iOS en appelant provideAPIKey sur GMSServices dans application: didFinishLaunchingWithOptions:

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GMSServices provideAPIKey:kMapsAPIKey];
  return YES;
}

Votre fichier AppDelegate.m mis à jour devrait maintenant ressembler à ceci :

#import "AppDelegate.h"
@import GoogleMaps;

static NSString *const kMapsAPIKey = @"YOUR API KEY";

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  [GMSServices provideAPIKey:kMapsAPIKey];
  return YES;
}
@end

Votre Podfile devrait se présenter comme suit :

source 'https://github.com/CocoaPods/Specs.git'
platform :ios, '11.0'

target 'StarterApp' do
  use_frameworks!

pod 'GoogleMaps', '5.1.0.0'
pod 'Google-Maps-iOS-Utils', '3.4.0'

end

Maintenant que vos dépendances sont installées et que votre clé API est fournie, vous pouvez commencer à transmettre des appels au SDK Maps pour iOS.

4. Afficher une carte

Il est temps d'afficher votre première carte !

La partie du SDK Maps pour iOS la plus communément utilisée est la classe GMSMapView, qui fournit de nombreuses méthodes permettant de créer et de manipuler des instances de carte. Voici la marche à suivre.

Ouvrez ViewController.m.

C'est là que vous effectuerez toutes les autres tâches de cet atelier de programmation. Vous remarquerez que les événements de cycle de vie loadView et viewDidLoad pour le contrôleur de vue sont déjà bouchonnées. 2. Importez le SDK Maps pour iOS en ajoutant les lignes suivantes en haut du fichier :

@import GoogleMaps;

Déclarez une variable d'instance ViewController pour stocker GMSMapView.

L'instance de GMSMapView est le principal objet avec lequel vous allez travailler dans cet atelier de programmation. Vous la référencerez et l'exploiterez via différentes méthodes de cycle de vie du contrôleur de vue. Pour la rendre disponible, déclarez une variable d'instance dans ViewController afin de la stocker :

@implementation ViewController {
  GMSMapView *_mapView;
}

Dans loadView, créez une instance de GMSCameraPosition.

GMSCameraPosition définit la zone sur laquelle la carte sera centrée ainsi que le niveau de zoom. Ce code appelle la méthode cameraWithLatitude:longitude:zoom: pour centrer la carte sur Sydney, en Australie, à une latitude de -33.86 et une longitude de 151.20, avec un niveau de zoom de 12 :

GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86 longitude:151.20 zoom:12];

Dans loadView, instanciez la carte avec GMSMapView.

Pour créer une instance de carte, appelez mapWithFrame:camera:. Notez que le cadre est défini sur CGRectZero, une variable globale de la bibliothèque iOS CGGeometry qui spécifie un cadre ayant une largeur et une hauteur de 0, en position (0,0) à l'intérieur du contrôleur de vue. La caméra est réglée sur la position que vous venez de créer.

Pour afficher la carte, vous allez ensuite définir la vue racine du contrôleur de vue sur _mapview, ce qui aura pour effet d'afficher la carte en plein écran.

_mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
self.view = _mapView;

Définissez GMSMapViewDelegate sur le contrôleur de vue.

Une fois implémenté, le délégué de vue plan vous permet de traiter les événements issus des interactions utilisateur sur l'instance GMSMapView. Vous en aurez besoin ultérieurement.

Commencez par mettre à jour l'interface de ViewController afin qu'elle soit conforme au protocole pour GMSMapViewDelegate:

@interface ViewController ()<GMSMapViewDelegate>

Ensuite, ajoutez les lignes suivantes pour définir GMSMapViewDelegate sur ViewController.

_mapView.delegate = self;

Maintenant, actualisez l'application dans le simulateur iOS (Command+R). La carte devrait apparaître.

En résumé, lors de cette étape, vous avez créé une instance de GMSMapView pour afficher une carte centrée sur la ville de Sydney en Australie.

Votre fichier ViewController.m devrait maintenant se présenter comme suit :

#import "ViewController.h"
#import "LocationGenerator.h"
@import GoogleMaps;

@interface ViewController ()<GMSMapViewDelegate>
@end

@implementation ViewController {
  GMSMapView *_mapView;
}

- (void)loadView {
  [super loadView];
  GMSCameraPosition *camera = [GMSCameraPosition cameraWithLatitude:-33.86 longitude:151.20 zoom:12];
  _mapView = [GMSMapView mapWithFrame:CGRectZero camera:camera];
  self.view = _mapView;
  _mapView.delegate = self;
}

5. Personnalisation de cartes dans Google Cloud (facultatif)

Vous pouvez personnaliser le style de votre carte à l'aide de la fonctionnalité Personnalisation de cartes dans Google Cloud.

Créer un ID de carte

Si vous n'avez pas encore créé d'ID de carte associé à un style de carte, consultez le guide ID de carte pour effectuer les étapes suivantes :

Créer un ID de carte
Associer un ID de carte à un style de carte

Ajouter l'ID de carte dans votre application

Pour utiliser l'ID de carte que vous avez créé lors de l'étape précédente, ouvrez le fichier ViewController.m, puis créez un objet GMSMapID dans la méthode loadView et fournissez-lui l'ID de carte. Modifiez ensuite l'instanciation GMSMapView en fournissant l'objet GMSMapID en tant que paramètre.

ViewController.m

- (void)loadView {
    GMSMapID *mapID = [[GMSMapID alloc] initWithIdentifier:@"YOUR_MAP_ID"];
    _mapView = [GMSMapView mapWithFrame:CGRectZero mapID:mapID camera:camera];
    // ...
}

Une fois ces étapes terminées, exécutez l'application pour afficher votre carte dans le style que vous avez sélectionné.

6. Ajouter des repères à la carte

Le SDK Maps pour iOS offre de vastes possibilités aux développeurs, mais ajouter des repères sur la carte est sans aucun doute la fonctionnalité la plus populaire. Grâce aux repères, vous pouvez afficher des points spécifiques sur la carte. Ils constituent un élément d'UI courant permettant de gérer les interactions des utilisateurs. Si vous avez déjà utilisé Google Maps, vous connaissez probablement le repère par défaut, qui ressemble à ceci :

Au cours de cette étape, vous allez apprendre à utiliser la classe GMSMarker pour placer des repères sur la carte.

Notez que les repères ne peuvent être placés qu'une fois la carte chargée à l'étape précédente, avec l'événement de cycle de vie loadView du contrôleur d'affichage. Vous devez donc suivre ces étapes dans l'événement de cycle de vie viewDidLoad, qui est appelé après que la vue et la carte ont été chargées.

Définissez un objet CLLocationCoordinate2D.

CLLocationCoordinate2D est une structure mise à disposition par la bibliothèque iOS CoreLocation, qui définit un emplacement géographique à une latitude et une longitude données. Pour commencer à créer votre premier repère, définissez un objet CLLocationCoordinate2D, puis réglez la latitude et la longitude au centre de la carte. Vous pouvez accéder aux coordonnées du centre de la carte à partir de la vue plan, à l'aide des propriétés camera.target.latitude et camera.target.longitude.

CLLocationCoordinate2D mapCenter = CLLocationCoordinate2DMake(_mapView.camera.target.latitude, _mapView.camera.target.longitude);

Créez une instance de GMSMarker.

Le SDK Maps pour iOS fournit la classe GMSMarker. Chaque instance de GMSMarker représente un repère individuel sur la carte. Pour la créer, il faut appeler markerWithPosition: et lui transmettre un objet CLLocationCoordinate2D pour indiquer au SDK où placer le repère sur la carte.

GMSMarker *marker = [GMSMarker markerWithPosition:mapCenter];

Définissez une icône de repère personnalisée.

Le repère rouge qui s'affiche par défaut sur Google Maps est déjà très beau, mais vous pouvez faire aussi bien en personnalisant la carte ! Heureusement, utiliser un repère personnalisé est très simple avec le SDK Maps pour iOS. Vous remarquerez que le projet StarterApp comprend une image appelée "custom_pin.png" que vous pouvez utiliser. Vous pouvez également choisir n'importe quelle autre image.

Pour utiliser le repère personnalisé, définissez la propriété icon du repère sur une instance de UIImage.

marker.icon = [UIImage imageNamed:@"custom_pin.png"];

Affichez le repère sur la carte.

Votre repère est créé, mais vous remarquerez qu'il ne figure pas sur la carte. Pour l'afficher, définissez la propriété map de l'instance GMSMarker sur une instance de GMSMapView.

marker.map = _mapView;

Vous pouvez maintenant actualiser l'application et voir votre première carte avec un repère.

En résumé, dans cette section, vous avez créé une instance de la classe GMSMarker et l'avez appliquée à la vue plan pour afficher un repère sur la carte. Votre événement de cycle de vie viewDidLoad modifié devrait maintenant se présenter comme suit dans ViewController.m :

- (void)viewDidLoad {
  [super viewDidLoad];

  CLLocationCoordinate2D mapCenter = CLLocationCoordinate2DMake(_mapView.camera.target.latitude, _mapView.camera.target.longitude);
  GMSMarker *marker = [GMSMarker markerWithPosition:mapCenter];
  marker.icon = [UIImage imageNamed:@"custom_pin.png"];
  marker.map = _mapView;
}

7. Activer le regroupement de repères

Lorsque vous utilisez de nombreux repères ou que ceux-ci sont très proches les uns des autres, vous risquez de rencontrer des problèmes de chevauchement ou d'encombrement, ce qui nuit à l'expérience utilisateur. Par exemple, si deux repères sont très proches, vous risquez de vous retrouver dans une situation comme celle-ci :

C'est là qu'intervient le regroupement de repères. Il s'agit d'une autre fonctionnalité couramment utilisée regroupant les repères qui sont proches en une seule icône qui varie en fonction du niveau de zoom, comme suit :

L'algorithme de regroupement des repères divise la zone visible de la carte en une grille, puis regroupe les icônes qui se trouvent dans la même cellule. Heureusement, vous n'avez pas besoin de vous en soucier, car l'équipe Google Maps Platform a créé une bibliothèque d'utilitaires Open Source dédiée au SDK Google Maps pour iOS. Parmi ses nombreuses fonctionnalités, cette bibliothèque gère automatiquement les regroupements de repères. Pour en savoir plus sur le regroupement de repères, consultez la documentation de Google Maps Platform ou la source de la bibliothèque d'utilitaires iOS sur GitHub.

Ajoutez un grand nombre de repères à la carte.

Pour voir à quoi ressemble le regroupement de repères en pratique, la carte doit avoir beaucoup de repères à afficher. Pour vous faciliter la tâche, un générateur de repères est fourni avec le projet initial dans LocationGenerator.m.

Pour ajouter autant de repères que vous le souhaitez sur la carte, il suffit d'appeler generateMarkersNear:count: dans le cycle de vie viewDidLoad du contrôleur de vue sous le code de l'étape précédente. La méthode crée le nombre de repères spécifié dans count à des emplacements aléatoires autour des coordonnées spécifiées dans un objet CLLocationCoordinate2D. Ici, vous pouvez simplement lui transmettre la variable mapCenter que vous avez créée précédemment. Les repères sont renvoyés sous forme de NSArray.

NSArray<GMSMarker *> *markerArray = [LocationGenerator generateMarkersNear:mapCenter count:100];

Importez la bibliothèque d'utilitaires du SDK Google Maps pour iOS.

Pour ajouter la bibliothèque d'utilitaires iOS de Maps en tant que dépendance à votre projet, ajoutez les lignes suivantes à la liste des dépendances en haut de ViewController.m :

@import GoogleMapsUtils;

Configurez l'outil de regroupement de repères.

Pour utiliser l'outil de regroupement de repères, vous devez fournir trois éléments qui définiront son fonctionnement : un algorithme de regroupement, un générateur d'icônes et un moteur de rendu. L'algorithme détermine le comportement de regroupement des repères, par exemple, la distance entre les repères à inclure dans le même groupe. Le générateur d'icônes fournit les icônes à utiliser pour les groupes à différents niveaux de zoom. Le moteur de rendu gère l'affichage des icônes de clusters sur la carte.

Si vous préférez, vous pouvez développer vous-même ces trois éléments à partir de zéro, mais la bibliothèque d'utilitaires iOS de Maps propose des implémentations par défaut afin de faciliter le processus. Il vous suffit d'ajouter ce qui suit :

id<GMUClusterAlgorithm> algorithm = [[GMUNonHierarchicalDistanceBasedAlgorithm alloc] init];

id<GMUClusterIconGenerator> clusterIconGenerator = [[GMUDefaultClusterIconGenerator alloc] init];

id<GMUClusterRenderer> renderer = [[GMUDefaultClusterRenderer alloc] initWithMapView:_mapView clusterIconGenerator:clusterIconGenerator];

Créez une instance de GMUClusterManager.

GMUClusterManager est la classe qui implémente le regroupement de repères à l'aide de l'algorithme, du générateur d'icônes et du moteur de rendu que vous avez spécifiés. Pour créer le moteur de rendu et l'utiliser en vue plan, ajoutez d'abord une variable d'instance à l'implémentation ViewController pour stocker l'instance du gestionnaire de groupes :

@implementation ViewController {
  GMSMapView *_mapView;
  GMUClusterManager *_clusterManager;
}

Ensuite, créez l'instance de GMUClusterManager dans l'événement de cycle de vie viewDidLoad :

_clusterManager = [[GMUClusterManager alloc] initWithMap:_mapView algorithm:algorithm renderer:renderer];

Ajoutez les repères et exécutez l'outil de regroupement de repères.

Maintenant que votre instance d'outil de regroupement de repères est configurée, il vous suffit de transmettre le gestionnaire de groupes au tableau des repères à regrouper en appelant addItems:, puis d'exécuter le l'outil de regroupement en appelant cluster.

[_clusterManager addItems:markerArray];
[_clusterManager cluster];

Actualisez votre application. Vous devriez avoir les nombreux repères bien regroupés. Vous pouvez essayer différents niveaux de zoom (en pinçant l'écran et en utilisant l'outil de zoom de la carte) pour voir comment les groupes s'adaptent.

En résumé, lors de cette étape, vous avez configuré une instance d'outil de regroupement de repères à l'aide de la bibliothèque d'utilitaires du SDK Google Maps pour iOS, puis vous l'avez utilisée pour regrouper 100 repères sur la carte. Votre événement de cycle de vie viewDidLoad dans ViewController.m devrait maintenant se présenter comme suit :

- (void)viewDidLoad {
  [super viewDidLoad];

  CLLocationCoordinate2D mapCenter = CLLocationCoordinate2DMake(_mapView.camera.target.latitude,
                                                                _mapView.camera.target.longitude);
  GMSMarker *marker = [GMSMarker markerWithPosition:mapCenter];
  marker.icon = [UIImage imageNamed:@"custom_pin.png"];
  marker.map = _mapView;
  NSArray<GMSMarker *> *markerArray = [LocationGenerator generateMarkersNear:mapCenter count:100];

  id<GMUClusterAlgorithm> algorithm = [[GMUNonHierarchicalDistanceBasedAlgorithm alloc] init];
  id<GMUClusterIconGenerator> clusterIconGenerator = [[GMUDefaultClusterIconGenerator alloc] init];
  id<GMUClusterRenderer> renderer = [[GMUDefaultClusterRenderer alloc] initWithMapView:_mapView clusterIconGenerator:clusterIconGenerator];
  _clusterManager = [[GMUClusterManager alloc] initWithMap:_mapView algorithm:algorithm renderer:renderer];

  [_clusterManager addItems:markerArray];
  [_clusterManager cluster];
}

8. Ajouter une interaction utilisateur

Vous disposez désormais d'une belle carte qui affiche les repères et les regroupe. Dans cette étape, vous allez traiter certaines autres interactions utilisateur à l'aide de GMSMapViewDelegate, que vous avez défini précédemment dans le contrôleur de vue, afin d'améliorer l'expérience utilisateur de votre carte.

Le SDK Maps pour iOS est un système d'événements complet implémenté via le délégué de vue plan, qui comprend des gestionnaires d'événements vous permettant d'exécuter du code lorsque diverses interactions utilisateur se produisent. Par exemple, le délégué de vue plan inclut des méthodes qui vous permettent de déclencher du code lors d'interactions telles que les clics sur la carte et sur les repères, les déplacements de la carte, les zooms avant et arrière, et d'autres actions.

Dans cette étape, vous allez déplacer la carte via le programmatique pour la centrer sur le repère sélectionné par l'utilisateur.

Implémentez l'écouteur d'appui sur un repère.

mapView:didTapMarker est appelé chaque fois que l'utilisateur appuie sur l'un des repères que vous avez créés précédemment ou un groupe de repères (les groupes de repères sont implémentés en interne dans une instance de GMSMarker).

Pour implémenter l'écouteur d'événements, commencez par le bouchonner au bas de ViewController.m avant l'instruction end.

Vous remarquerez que la méthode renvoie NO. Cela indique au SDK iOS qu'il doit continuer d'exécuter les fonctionnalités de GMSMarker par défaut (par exemple, si une fenêtre d'informations est configurée, elle doit s'afficher) lorsque le code de votre gestionnaire d'événements est lancé.

- (BOOL)mapView:(GMSMapView *)mapView didTapMarker:(GMSMarker *)marker {

  return NO;
}

Traitez l'événement d'appui et actionnez la caméra pour recentrer la carte sur un repère ou un groupe de repères sur lequel l'utilisateur a appuyé.

Lorsque mapView:didTapMarker est appelé, il transmet l'instance de GMSMarker sur laquelle l'utilisateur a appuyé, ce qui vous permet de traiter cet événement dans votre code. Vous pouvez utiliser cette instance pour recentrer la carte en appelant animateToLocation: sur la vue plan à partir du gestionnaire d'événements et en lui transmettant la position de l'instance de repère, disponible dans la propriété position.

[_mapView animateToLocation:marker.position];

Zoomez sur un groupe de repères lorsque l'utilisateur appuie dessus.

De nombreuses applications zooment sur les groupes de repères lorsque l'utilisateur clique dessus. Ce comportement permet de voir individuellement les repères, car le groupe est scindé lorsque le niveau de zoom le permet.

Comme indiqué précédemment, l'icône de groupe de repères est en réalité une simple implémentation de GMSMarker avec une icône personnalisée. Comment savoir si l'utilisateur a appuyé sur un repère ou sur un groupe de repères ? Lorsque le gestionnaire de groupes de repères crée une icône de groupe, il implémente l'instance de GMSMarker pour se conformer à un protocole appelé GMUCluster. Vous pouvez utiliser une condition pour vérifier si le repère transmis au gestionnaire d'événements est conforme à ce protocole.

Une fois que vous déterminez via le programmatique à quel moment l'utilisateur appuie sur un groupe, vous pouvez appeler animateToZoom: sur l'instance de vue plan et définir le zoom au niveau actuel plus un. Le niveau de zoom actuel est disponible au niveau de l'instance de vue plan dans la propriété camera.zoom.

Notez également que le code ci-dessous renvoie YES. Cela indique au gestionnaire d'événements que vous avez terminé de traiter l'événement, et qu'aucun autre code ne doit être exécuté dans le gestionnaire. Vous évitez ainsi, entre autres, que l'objet GMSMarker sous-jacent exécute le reste de son comportement par défaut (par exemple, qu'il affiche une fenêtre d'informations alors que ce n'est pas pertinent si l'utilisateur appuie sur une icône de groupe).

if ([marker.userData conformsToProtocol:@protocol(GMUCluster)]) {
    [_mapView animateToZoom:_mapView.camera.zoom +1];
    return YES;
}

Maintenant, actualisez l'application, et appuyez sur quelques repères et groupes de repères. La carte est recentrée sur l'élément sélectionné, quel qu'il soit. Lorsque vous appuyez sur un groupe de repères, la carte fait un zoom avant d'un niveau, et le groupe se développe pour afficher les repères qu'il contient.

Pour résumer, lors de cette étape, vous avez implémenté l'écouteur d'appuis sur des repères, et traité l'événement pour recentrer la carte sur l'élément sélectionné et faire un zoom avant si cet élément est un icône de groupe de repères.

Votre méthode mapView:didTapMarker devrait se présenter comme suit :

- (BOOL)mapView:(GMSMapView *)mapView didTapMarker:(GMSMarker *)marker {
  [_mapView animateToLocation:marker.position];

  if ([marker.userData conformsToProtocol:@protocol(GMUCluster)]) {
    [_mapView animateToZoom:_mapView.camera.zoom +1];
    return YES;
  }

  return NO;
}

9. Dessiner sur la carte

Jusqu'à présent, vous avez créé une carte de Sydney qui affiche des repères à 100 points aléatoires et traite les interactions des utilisateurs. La dernière étape de cet atelier de programmation consiste à ajouter des fonctions utiles à votre carte à l'aide des fonctionnalités de dessin du SDK Maps pour iOS.

Imaginons que cette carte soit utilisée par une personne qui souhaite explorer la ville de Sydney. Il pourrait être intéressant qu'elle visualise un rayon autour d'un repère sur lequel elle clique. Cela lui permettrait de voir facilement les autres destinations se trouvant à distance de marche raisonnable du repère en question.

Le SDK iOS inclut un ensemble de fonctions permettant de dessiner des formes sur la carte telles que des carrés, des polygones, des lignes et des cercles. Vous allez à présent afficher un cercle représentant un rayon de 800 mètres autour d'un repère lorsqu'un utilisateur clique dessus.

Ajoutez une variable d'instance _circ à l'implémentation de ViewController.

Cette variable d'instance sera utilisée pour enregistrer le dernier cercle tracé afin qu'il puisse être détruit avant qu'un autre soit créé. En effet, si le cercle persiste autour de tous les repères que l'utilisateur sélectionne, ce ne serait pas très utile, et la carte deviendrait rapidement moche.

Pour ajouter cette instance, modifiez l'implémentation de ViewController comme suit :

@implementation ViewController {
  GMSMapView *_mapView;
  GMUClusterManager *_clusterManager;
  GMSCircle *_circ;
}

Tracez le cercle lorsque l'utilisateur appuie sur un repère.

En bas de la méthode mapView:didTapMarker, ajoutez le code suivant pour créer une instance de la classe GMSCircle du SDK iOS, qui dessinera un nouveau cercle de 800 mètres de rayon. Pour cela, appelez circleWithPosition:radius: et transmettez-lui la position du repère sélectionné (comme vous l'avez fait précédemment pour recentrer la carte).

_circ = [GMSCircle circleWithPosition:marker.position radius:800];

Appliquez un style au cercle.

Par défaut, GMSCircle trace un cercle avec un contour noir et un remplissage transparent. Ce style convient pour indiquer un rayon, mais il ne sera peut-être pas très beau ni très visible. Ajoutez une couleur de remplissage pour améliorer le style en affectant une couleur UIColor à la propriété fillColor du cercle. Le code suivant ajoute un remplissage gris avec une transparence de 50 % :

_circ.fillColor = [UIColor colorWithRed: 0.67 green: 0.67 blue: 0.67 alpha: 0.5];

Affichez le cercle sur la carte.

Comme précédemment lorsque vous avez créé les repères, vous remarquerez qu'il ne suffit pas de créer une instance de GMSCircle pour afficher le cercle sur la carte. Pour ce faire, il vous suffit d'attribuer l'instance de vue plan à la propriété map du cercle.

_circ.map = _mapView;

Supprimez tous les cercles affichés précédemment.

Comme nous l'avons dit précédemment, ajouter des cercles les uns en plus des autres n'offre pas une bonne expérience utilisateur. Pour supprimer le cercle affiché suite à l'appui précédent, définissez la propriété map de _circ sur nil en haut de mapView:didTapMarker.

_circ.map = nil;

Actualisez l'application et appuyez sur un repère. Vous devriez voir un nouveau cercle tracé lorsque vous appuyez sur un repère, tandis que l'ancien est supprimé.

Pour résumer, lors de cette étape, vous avez utilisé la classe GMSCircle pour afficher un cercle chaque fois que l'utilisateur appuie sur un repère.

Votre méthode mapView:didTapMarker devrait se présenter comme suit :

- (BOOL)mapView:(GMSMapView *)mapView didTapMarker:(GMSMarker *)marker {
  _circ.map = nil;
  [_mapView animateToLocation:marker.position];

  if ([marker.userData conformsToProtocol:@protocol(GMUCluster)]) {
    [_mapView animateToZoom:_mapView.camera.zoom +1];
    return YES;
  }

  _circ = [GMSCircle circleWithPosition:marker.position radius:800];
  _circ.fillColor = [UIColor colorWithRed: 0.67 green: 0.67 blue: 0.67 alpha: 0.5];
  _circ.map = _mapView;
  return NO;
}

10. Félicitations

Vous venez de créer votre première application iOS à l'aide de Google Maps Platform, ce qui implique de charger le SDK Maps pour iOS, de charger une carte, d'utiliser des repères, de contrôler la carte et de dessiner dessus, et d'ajouter des interactions utilisateur.

Pour voir le code terminé, consultez le projet finalisé dans le répertoire /solution.

Quelle est l'étape suivante ?

Dans cet atelier de programmation, nous n'avons traité que les fondamentaux. Le SDK Maps pour iOS vous offre bien d'autres possibilités. Essayez ensuite d'ajouter les éléments suivants à la carte :

Modifiez le type de carte pour afficher les images satellite, hybrides et avec le relief.
Personnalisez d'autres interactions utilisateur comme le zoom et les commandes de la carte.
Ajoutez des fenêtres d'informations pour afficher des renseignements lorsqu'un internaute clique sur un repère.
Avec le SDK Places pour iOS, ajoutez à votre application des éléments géographiques et des données de lieu enrichis issus de Google Maps Platform.

Pour découvrir d'autres façons d'utiliser Google Maps Platform sur le Web, cliquez sur les liens suivants :