Aggiungere una mappa all'app per iOS (Objective-C)

1. Prima di iniziare

Abstract

In questo codelab imparerai tutto ciò che ti serve per iniziare a utilizzare Google Maps Platform per creare app per iOS in Objective-C. Imparerai tutte le nozioni di base: dalla configurazione al caricamento dell'SDK Maps per iOS, alla visualizzazione della prima mappa, all'utilizzo degli indicatori e al clustering degli indicatori, al disegno sulla mappa e alla gestione delle interazioni degli utenti.

Cosa devi creare

In questo codelab, creerai un'app per iOS che esegue le seguenti operazioni:

• Carica l'SDK Maps per iOS e l'SDK Maps per iOS
• Visualizza una mappa incentrata su Sydney, Australia
• Visualizza indicatori personalizzati per 100 punti intorno a Sydney
• Implementa il clustering degli indicatori
• Consente l'interazione dell'utente che si centra di nuovo e disegna un cerchio sulla mappa quando viene fatto clic su un indicatore

Obiettivi didattici

• Iniziare a utilizzare Google Maps Platform
• Caricamento dell'SDK Maps per iOS e dell'SDK Google Maps SDK for iOS
• Caricamento di una mappa
• Utilizzare indicatori, indicatori personalizzati e clustering di indicatori
• Utilizzo del sistema di eventi Maps SDK for iOS per fornire l'interazione dell'utente
• Controllare la mappa in modo programmatico
• Disegnare sulla mappa

Prerequisiti

Per completare il codelab, devi acquisire familiarità con gli argomenti riportati di seguito. Se hai già familiarità con Google Maps Platform, vai direttamente al codelab.

Prodotti di Google Maps Platform obbligatori

In questo codelab, utilizzerai i seguenti prodotti di Google Maps Platform:

• Maps SDK for iOS
• Libreria Utility SDK di Google Maps per iOS

Inizia a utilizzare Google Maps Platform

Se non hai mai utilizzato Google Maps Platform, segui la guida introduttiva a Google Maps Platform o guarda la playlist Introduzione a Google Maps Platform per completare la seguente procedura:

1. Crea un account di fatturazione.
2. Crea un progetto.
3. Abilita le API e gli SDK di Google Maps Platform (elencati nella sezione precedente).
4. Genera una chiave API.

Nota: devi accedere a un Account Google esistente o crearne uno nuovo durante la procedura di registrazione.

Altri requisiti per questo codelab

Per completare questo codelab, avrai bisogno dei seguenti account, servizi e strumenti:

• Un account Google Cloud Platform con fatturazione abilitata
• Una chiave API di Google Maps Platform in cui è abilitato l'SDK Maps per iOS
• Conoscenza di base dell'Obiettivo-C
• Xcode 12.0 con un SDK target di 12.0 o versioni successive

2. Configura

Per il passaggio di attivazione qui sotto, devi attivare l'SDK Maps per iOS.

Configurare Google Maps Platform

Se non hai ancora un account Google Cloud Platform e un progetto con la fatturazione abilitata, consulta la guida Utilizzo di Google Maps Platform per creare un account di fatturazione e un progetto.

1. In Cloud Console, fai clic sul menu a discesa del progetto e seleziona il progetto che vuoi utilizzare per questo codelab.

2. Abilita le API e gli SDK di Google Maps Platform richiesti per questo codelab in Google Cloud Marketplace. Per farlo, segui la procedura descritta in questo video o in questa documentazione.
3. Genera una chiave API nella pagina Credentials di Cloud Console. Puoi seguire la procedura descritta in questo video o in questa documentazione. Tutte le richieste a Google Maps Platform richiedono una chiave API.

Configurazione modello di avvio progetti

Prima di iniziare questo codelab, scarica i modelli di progetto iniziale e il codice della soluzione completo:

1. Scarica o crea un fork del repository GitHub per questo codelab su https://github.com/googlecodelabs/maps-platform-101-objc.

Il progetto StarterApp si trova nella directory /starter e include la struttura di base del file di cui hai bisogno per completare il codelab. Tutto ciò che ti serve è disponibile nella directory /starter/StarterApp.

Se vuoi vedere il codice della soluzione completo in esecuzione, puoi completare i passaggi di configurazione precedenti e visualizzare la soluzione nella directory /solution/SolutionApp.

3. Installa l'SDK Maps per iOS

Il primo passaggio per utilizzare Maps SDK for iOS consiste nell'installare le dipendenze necessarie. La procedura prevede due passaggi: l'installazione dell'SDK di Maps per iOS e della Utility Maps per iOS dalla libreria delle dipendenze Cocoapods e per fornire la chiave API all'SDK.

1. Aggiungi l'SDK Maps per iOS e l'SDK Maps per iOS in Podfile.

In questo codelab, utilizzerai sia Maps SDK for iOS, che fornisce tutte le funzionalità di base di Google Maps, sia Maps Maps Utility Library, che offre svariate utilità per arricchire la mappa, tra cui il clustering degli indicatori.

Per iniziare, in Xcode (o nel tuo editor di testo preferito) apri Pods > Podfile e aggiorna il file in modo da includere le dipendenze di Maps SDK for iOS e della Utility Library in use_frameworks!:

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

2. Installa i pod Maps SDK for iOS e Maps SDK for iOS Utility Library.

Per installare le dipendenze, esegui pod install nella directory /starter dalla riga di comando. Cocoapods scaricherà automaticamente le dipendenze, oltre a creare StarterApp.xcworkspace. 3. Una volta installate le dipendenze, apri StarterApp.xcworkspace in Xcode, quindi esegui l'app nel simulatore dell'iPhone premendo Command+R. Se tutto è configurato correttamente, il simulatore viene avviato e viene visualizzata una schermata nera. Non ti preoccupare, non hai ancora creato nulla, quindi è previsto! 4. Importa l'SDK in AppDelegate.h.

Ora che le dipendenze sono installate, è il momento di fornire la tua chiave API all'SDK. Il primo passaggio consiste nell'importare l'SDK Maps per iOS come dipendenza inserendo quanto segue sotto l'istruzione di importazione #import "AppDelegate.h":

@import GoogleMaps;

5. Sotto l'istruzione di importazione dell'SDK per iOS, dichiara una costante NSString con il valore impostato nella tua chiave API:

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

6. Passa la chiave API all'SDK per iOS chiamando provideAPIKey su GMSServices in application: didFinishLaunchingWithOptions:

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

Il file AppDelegate.m aggiornato dovrebbe avere il seguente aspetto:

#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

Il tuo Podfile dovrebbe avere il seguente aspetto:

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

Una volta installate le dipendenze e fornita la chiave API, puoi iniziare a effettuare chiamate all'SDK di Maps per iOS.

4. Visualizzazione di una mappa

È ora di visualizzare la tua prima mappa.

La parte più utilizzata dell'SDK di Maps per iOS è la classe GMSMapView, che fornisce molti dei metodi che consentono di creare e manipolare istanze di mappa. Ecco come è fatto.

1. Apri ViewController.m.

Qui svolgerai tutto il lavoro rimanente per questo codelab. Noterai che gli eventi del ciclo di vita loadView e viewDidLoad del controller di visualizzazione sono già simulati. 2. Importa l'SDK di Maps per iOS aggiungendo quanto segue nella parte superiore del file:

@import GoogleMaps;

3. Dichiara una variabile di istanza ViewController per archiviare GMSMapView.

L'istanza di GMSMapView è l'oggetto principale con cui lavorerai in questo codelab e vi farai riferimento e interverrai su vari metodi del ciclo di vita del controller vista. Per renderla disponibile, aggiorna l'implementazione di ViewController per dichiarare una variabile di istanza per archiviarla:

@implementation ViewController {
  GMSMapView *_mapView;
}

4. In loadView, crea un'istanza di GMSCameraPosition.

GMSCameraPosition definisce il punto in cui la mappa verrà centrata e il livello di zoom che verrà visualizzato. Questo codice chiama il metodo cameraWithLatitude:longitude:zoom: per centrare la mappa su Sydney, in Australia, con una latitudine di -33,86 e una longitudine di 151,20, con un livello di zoom pari a 12:

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

5. In loadView, crea un'istanza di GMSMapView per creare un'istanza della mappa.

Per creare una nuova istanza della mappa, chiama mapWithFrame:camera:. Tieni presente che il frame è impostato su CGRectZero, una variabile globale della libreria CGGeometry di iOS che specifica un frame di 0 larghezza, 0 altezza e che si trova in posizione (0,0) all'interno del controller di visualizzazione. La videocamera è impostata sulla posizione appena creata.

Per visualizzare effettivamente la mappa, successivamente imposta la visualizzazione principale del controller di visualizzazione su _mapview, in modo che la mappa venga visualizzata a schermo intero.

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

6. Imposta GMSMapViewDelegate sul controller di visualizzazione.

Una volta implementata, la delega della visualizzazione mappa ti consente di gestire gli eventi delle interazioni utente nell'istanza GMSMapView, cosa che dovrai fare in seguito.

Innanzitutto, aggiorna l'interfaccia di ViewController in modo che sia conforme al protocollo per GMSMapViewDelegate:

@interface ViewController ()<GMSMapViewDelegate>

Aggiungi quanto segue per impostare GMSMapViewDelegate su ViewController.

_mapView.delegate = self;

A questo punto, ricarica l'app nel simulatore di iOS (Command+R) per visualizzare la mappa.

In questo passaggio hai creato un'istanza di GMSMapView per mostrare una mappa incentrata sulla città di Sydney, in Australia.

Il file ViewController.m dovrebbe avere il seguente aspetto:

#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. Stile della mappa basato su cloud (facoltativo)

Puoi personalizzare lo stile della mappa utilizzando gli stili basati su cloud.

Crea un ID mappa

Se non hai ancora creato un ID mappa con uno stile associato, consulta la guida ID mappa per completare la seguente procedura:

1. Crea un ID mappa.
2. Associa un ID mappa a uno stile mappa.

Nota: l'utilizzo di un ID mappa in Maps SDK for Android o in Maps SDK for iOS attiva un caricamento mappa che viene addebitato in base allo SKU di Dynamic Maps. Per ulteriori informazioni, consulta la sezione Fatturazione Google Maps.

Aggiungere l'ID mappa alla tua app

Per utilizzare l'ID mappa che hai creato nel passaggio precedente, apri il file ViewController.m e, nel metodo loadView, crea un oggetto GMSMapID e forniscigli l'ID mappa. Poi modifica l'istanza di GMSMapView fornendo l'oggetto GMSMapID come parametro.

ViewController.m

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

Una volta completata questa operazione, procedi ed esegui l'app per visualizzare la mappa nello stile che hai selezionato.

6. Aggiungere indicatori alla mappa

L'SDK Maps per iOS include molte attività degli sviluppatori, ma l'inserimento di indicatori sulla mappa è sicuramente quello più richiesto. Gli indicatori consentono di mostrare punti specifici sulla mappa e sono un elemento comune dell'interfaccia utente per la gestione dell'interazione degli utenti. Se hai già utilizzato Google Maps, probabilmente conosci l'indicatore predefinito, simile al seguente:

In questo passaggio imparerai a utilizzare la classe GMSMarker per inserire gli indicatori sulla mappa.

Tieni presente che gli indicatori non possono essere inseriti sulla mappa fino a quando non viene caricata la mappa dal passaggio precedente nell'evento del ciclo di vita dei loadView del controller della vista, quindi completerai questi passaggi nell'evento del ciclo di vita di viewDidLoad, che viene chiamato dopo che la visualizzazione (e la mappa) è stata caricata.

1. Definisci un oggetto CLLocationCoordinate2D.

CLLocationCoordinate2D è una struttura resa disponibile dalla libreria CoreLocation di iOS, che definisce una posizione geografica a una latitudine e una longitudine impostate. Per iniziare a creare il tuo primo indicatore, definisci un oggetto CLLocationCoordinate2D e imposta la latitudine e la longitudine al centro della mappa. È possibile accedere alle coordinate del centro della mappa dalla visualizzazione mappa, utilizzando le proprietà camera.target.latitude e camera.target.longitude.

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

2. Crea un'istanza di GMSMarker.

L'SDK Maps per iOS fornisce la classe GMSMarker. Ogni istanza di GMSMarker rappresenta un singolo indicatore sulla mappa e viene creata chiamando markerWithPosition: e trasmettendolo un oggetto CLLocationCoordinate2D per indicare all'SDK dove posizionare l'indicatore sulla mappa.

GMSMarker *marker = [GMSMarker markerWithPosition:mapCenter];

3. Imposta un'icona dell'indicatore personalizzato.

L'indicatore rosso predefinito per Google Maps è fantastico, ma è anche possibile personalizzare la mappa. Fortunatamente, l'utilizzo di un indicatore personalizzato è molto semplice con l'SDK Maps per iOS. Noterai che il progetto StarterApp include un'immagine denominata "custom_pin.png&#39" che puoi utilizzare, ma puoi usare qualsiasi immagine.

Per impostare l'indicatore personalizzato, imposta la proprietà icon dell'indicatore su un'istanza di UIImage.

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

4. Visualizza l'indicatore sulla mappa.

L'indicatore è stato creato, ma puoi notare che non è presente sulla mappa. A tale scopo, imposta la proprietà map dell'istanza GMSMarker su un'istanza di GMSMapView.

marker.map = _mapView;

Ora ricarica l'app e vedrai la tua prima mappa con un indicatore.

In breve, in questa sezione hai creato un'istanza della classe GMSMarker e l'hai applicata alla visualizzazione mappa per mostrare un indicatore sulla mappa. L'evento aggiornato del ciclo di vita viewDoneLoad in ViewController.m dovrebbe ora avere il seguente aspetto:

- (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. Abilita cluster di indicatori

Quando gli indicatori sono troppo vicini tra loro, potrebbero verificarsi problemi quando gli indicatori si sovrappongono o appaiono troppo affollati, causando un'esperienza utente negativa. Ad esempio, se due indicatori sono molto vicini, potresti ottenere una situazione simile alla seguente:

È qui che entra in gioco il clustering degli indicatori. Il clustering degli indicatori è un'altra funzionalità ampiamente implementata, che raggruppa gli indicatori vicini in un'unica icona che varia a seconda del livello di zoom, come nel seguente esempio:

L'algoritmo per il clustering degli indicatori suddivide l'area visibile della mappa in una griglia, quindi raggruppa le icone che si trovano nella stessa cella. Per fortuna non devi preoccuparti di questo aspetto, perché il team di Google Maps Platform ha creato una utile libreria open source chiamata Google Maps SDK for iOS Utility Library. Questa libreria, tra le altre cose, gestisce automaticamente il clustering degli indicatori. Per saperne di più sul clustering degli indicatori, consulta la documentazione di Google Maps Platform oppure controlla l'origine della libreria delle utilità per iOS su GitHub.

1. Aggiungi molti altri indicatori alla mappa.

Per vedere il raggruppamento degli indicatori in azione, devi inserire sulla mappa molti indicatori. Per semplificare questa operazione, nel progetto iniziale in LocationGenerator.m troverai un pratico generatore di indicatori.

Per aggiungere alla mappa tutti gli indicatori che vuoi, chiama semplicemente generateMarkersNear:count: nel ciclo di vita viewDidLoad del controller di visualizzazione sotto il codice del passaggio precedente. Il metodo crea il numero di indicatori specificato in count in posizioni casuali intorno alle coordinate specificate in un oggetto CLLocationCoordinate2D. In questo caso, puoi semplicemente passare la variabile mapCenter che hai creato in precedenza. Gli indicatori vengono restituiti in un elemento NSArray.

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

2. Importa la Utilità Google Maps SDK for iOS.

Per aggiungere la libreria di utilità di Maps per iOS come dipendenza al tuo progetto, aggiungi quanto segue all'elenco delle dipendenze nella parte superiore di ViewController.m:

@import GoogleMapsUtils;

3. Configura il clusterer di indicatore.

Per utilizzare il clusterer di indicatore, devi fornire tre elementi per configurare il suo funzionamento: un algoritmo di clustering, un generatore di icone e un renderer. L'algoritmo determina il comportamento di clustering degli indicatori, ad esempio la distanza tra gli indicatori da includere nello stesso cluster. Il generatore di icone fornisce icone dei cluster da utilizzare a diversi livelli di zoom. Il renderer gestisce la visualizzazione effettiva delle icone dei cluster sulla mappa.

Se preferisci, puoi scrivere tutto questo, ma la libreria di utilità di Maps per iOS fornisce implementazioni predefinite per semplificare il processo. Aggiungi quanto segue:

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

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

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

4. Crea un'istanza di GMUClusterManager.

GMUClusterManager è la classe che implementa il clustering degli indicatori, utilizzando l'algoritmo, il generatore di icone e il renderer specificati da te. Per creare il renderer e renderlo disponibile nella visualizzazione mappa, aggiungi innanzitutto una variabile di istanza all'implementazione ViewController per archiviare l'istanza di gestione del cluster:

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

Quindi, crea l'istanza di GMUClusterManager nell'evento del ciclo di vita viewDidLoad:

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

5. Aggiungi gli indicatori ed esegui il cluster di indicatori.

Ora che l'istanza del cluster di indicatori è configurata, devi solo passare il gestore del cluster all'array di indicatori da raggruppare chiamando addItems: e poi eseguire il clusterer chiamando cluster.

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

Ricarica la tua app e ora dovresti vedere tantissimi indicatori, tutti ben raggruppati. Vai avanti e divertiti con livelli di zoom diversi, pizzicando e aumentando lo zoom sulla mappa, per vedere i cluster degli indicatori man mano che aumenti o diminuisci lo zoom.

In questo modo, hai configurato un'istanza del clusterer di indicatori nell'SDK Google Maps SDK for iOS, quindi l'hai utilizzata per raggruppare 100 indicatori sulla mappa. L'evento del ciclo di vita di viewDidLoad in ViewController.m dovrebbe essere simile al seguente:

- (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. Aggiungi interazione utente

Ora hai una bella mappa che mostra gli indicatori e utilizza il clustering degli indicatori. In questo passaggio dovrai aggiungere ulteriori informazioni sulla gestione delle interazioni degli utenti utilizzando GMSMapViewDelegate, che hai impostato in precedenza sul controller di visualizzazione, per migliorare l'esperienza utente sulla mappa.

L'SDK di Maps per iOS fornisce un sistema di eventi completo implementato tramite il delegato della visualizzazione mappa, che include i gestori di eventi che consentono di eseguire il codice quando si verificano varie interazioni dell'utente. Ad esempio, il delegato della visualizzazione mappa include metodi che ti consentono di attivare l'esecuzione del codice per interazioni quali l'utente che fa clic sulla mappa e sugli indicatori, esegue una panoramica della mappa, aumenta o diminuisce lo zoom e altro ancora.

In questo passaggio, imposterai in modo programmatico la panoramica sulla mappa in base a qualsiasi indicatore toccato dall'utente.

1. Implementa il listener di tocco dell'indicatore.

mapView:didTapMarker viene chiamato ogni volta che l'utente tocca uno degli indicatori creati in precedenza, o ogni volta che un utente tocca un cluster di indicatori (i cluster di indicatori interni sono implementati come istanza di GMSMarker).

Per implementare il listener di eventi, inizialo simulando la parte inferiore del tag ViewController.m prima dell'istruzione end.

Noterai che il metodo restituisce NO. In questo modo indichi all'SDK di iOS di continuare a eseguire la funzionalità predefinita di GMSMarker, ad esempio di mostrare una finestra informativa se ne è stata configurata una dopo l'esecuzione del codice del gestore di eventi.

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

  return NO;
}

2. Gestisci l'evento di tocco e anima la fotocamera per ricentrare la mappa quando viene toccato un indicatore.

Quando la chiamata viene eseguita, mapView:didTapMarker passa l'istanza di GMSMarker che è stata toccata, consentendoti di gestirla nel codice. Puoi utilizzare questa istanza per ricentrare la mappa richiamando animateToLocation: sulla visualizzazione mappa dall'interno del gestore di eventi e passando la posizione dell'istanza indicatore, disponibile nella proprietà position.

[_mapView animateToLocation:marker.position];

3. Aumenta lo zoom su un cluster indicatore quando viene toccato.

Un pattern UX comune consiste nell'aumentare lo zoom sui cluster degli indicatori quando vengono toccati. Ciò consente agli utenti di visualizzare gli indicatori in cluster, poiché il cluster si espanderà a livelli di zoom inferiori.

Come indicato in precedenza, l'icona del cluster di indicatore è in realtà un'implementazione di GMSMarker con un'icona personalizzata. Come puoi capire se un indicatore o un cluster di indicatori è stato toccato? Quando il gestore del cluster di indicatori crea una nuova icona di cluster, implementa l'istanza di GMSMarker in modo che sia conforme a un protocollo chiamato GMUCluster.. Puoi utilizzare una condizione per verificare se l'indicatore passato nel gestore di eventi è conforme a questo protocollo.

Dopo aver appurato in modo programmatico che un cluster è stato toccato, puoi chiamare animateToZoom: sull'istanza di visualizzazione mappa e impostare lo zoom sul livello di zoom corrente più uno. Il livello di zoom corrente è disponibile nell'istanza di visualizzazione mappa nella proprietà camera.zoom.

Inoltre, nota come il codice riportato di seguito restituisce YES. Questa opzione informa il gestore di eventi che hai completato la gestione dell'evento e non deve eseguire ulteriori codici nel gestore. Uno dei motivi per cui ciò si verifica è impedire all'oggetto GMSMarker sottostante di eseguire il resto del comportamento predefinito, ad esempio la visualizzazione di una finestra informativa, che non avrebbe molto senso nel caso in cui si toccasse un'icona di cluster.

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

Ora ricarica l'app e tocca alcuni indicatori e cluster di indicatori. Quando viene toccato uno dei due valori, la mappa viene ricentrata sull'elemento toccato. Quando viene toccato un cluster di indicatori, la mappa aumenta anche lo zoom di un livello e il cluster si espande per mostrare gli indicatori raggruppati sotto.

Ricapitolando, in questo passaggio hai implementato il listener di tocchi e hai gestito l'evento per ricentrare l'elemento toccato e aumenta lo zoom se l'elemento è un'icona di raggruppamento degli indicatori.

Il metodo mapView:didTapMarker dovrebbe avere il seguente aspetto:

- (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. Disegna sulla mappa

Finora hai creato una mappa di Sydney che mostra indicatori in 100 punti casuali e che gestisce l'interazione degli utenti. Nell'ultimo passaggio di questo codelab, utilizzerai le funzionalità di disegno del Maps SDK for iOS per aggiungere un'ulteriore funzionalità utile alla tua esperienza sulla mappa.

Immagina che questa mappa venga utilizzata dagli utenti che hanno intenzione di esplorare la città di Sydney. Una funzionalità utile consiste nel visualizzare un raggio intorno a un indicatore quando viene selezionato. consentendo all'utente di comprendere facilmente quali altre destinazioni si trovano a pochi passi dall'indicatore selezionato.

L'SDK per iOS include un insieme di funzioni per disegnare forme sulla mappa, come quadrati, poligoni, linee e cerchi. Successivamente, eseguirai un rendering di un cerchio per mostrare un raggio di 800 metri (circa mezzo miglio) intorno a un indicatore quando viene selezionato.

1. Aggiungi una variabile di istanza _circ all'implementazione di ViewController.

Questa variabile di istanza verrà utilizzata per salvare il cerchio tracciato più di recente, in modo che possa essere eliminato prima di tracciare un'altra. Dopotutto, non sarebbe molto utile per l'utente e sarebbe brutto se ogni indicatore passato avesse un cerchio intorno!

A tale scopo, aggiorna l'implementazione di ViewController in questo modo:

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

2. Disegna il cerchio quando viene toccato un indicatore.

Nella parte inferiore del metodo mapView:didTapMarker, aggiungi il seguente codice per creare un'istanza della classe GMSCircle dell'SDK per iOS per disegnare un nuovo cerchio di 800 metri chiamando circleWithPosition:radius: e passando la posizione dell'indicatore toccato, proprio come hai fatto quando hai centrato nuovamente la mappa.

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

3. Applica stili al cerchio.

Per impostazione predefinita, GMSCircle traccia un cerchio con un tratto nero e un riempimento trasparente. Funzionerà per mostrare il raggio, ma non ha un bel aspetto ed è un po' difficile da vedere. Quindi, assegna un colore di riempimento al cerchio per migliorarne lo stile assegnando un UIColor alla proprietà fillColor del cerchio. Il seguente codice aggiungerà un riempimento grigio con una trasparenza del 50%:

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

4. Traccia il cerchio sulla mappa.

Proprio come quando hai creato gli indicatori in precedenza, noterai che la semplice creazione di un'istanza di GMSCircle non viene visualizzata sulla mappa. Per farlo, è sufficiente assegnare l'istanza di visualizzazione mappa alla proprietà map della cerchia.

_circ.map = _mapView;

5. Rimuovi le cerchie visualizzate in precedenza.

Come detto in precedenza, non sarebbe una buona esperienza per gli utenti continuare ad aggiungere cerchi alla mappa. Per rimuovere la cerchia visualizzata da un evento di tocco precedente, imposta la proprietà map di _circ su nil in cima a mapView:didTapMarker.

_circ.map = nil;

Ricarica l'app e tocca un indicatore. Ogni volta che viene toccato un indicatore e viene rimosso un cerchio visualizzato in precedenza, viene visualizzato un nuovo cerchio.

Riepilogando, in questo passaggio hai utilizzato la classe GMSCircle per visualizzare un cerchio ogni volta che viene toccato un indicatore.

Il metodo mapView:didTapMarker dovrebbe avere il seguente aspetto:

- (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. Complimenti

Hai creato la tua prima app per iOS utilizzando Google Maps Platform, ad esempio caricando l'SDK Maps per iOS, caricando una mappa, utilizzando gli indicatori, controllando e disegnando sulla mappa e aggiungendo l'interazione dell'utente.

Per visualizzare il codice completato, controlla che il progetto finito sia la directory /solution.

Passaggi successivi

In questo codelab abbiamo visto solo i concetti di base sull'utilizzo di Maps SDK for iOS. Poi, prova ad aggiungere alcune di queste funzionalità alla mappa:

• Modifica il tipo di mappa per visualizzare mappe satellitari, ibride e rilievi.
• Personalizza altre interazioni utente come i controlli di zoom e mappa.
• Aggiungi finestre informative per visualizzare informazioni quando gli utenti fanno clic sugli indicatori.
• Consulta l'SDK Places per iOS per aggiungere funzionalità e dati multimediali relativi ai luoghi di Google Maps Platform alla tua app.

Per continuare a scoprire altri modi per lavorare con Google Maps Platform sul Web, consulta questi link:

• Documentazione di Maps SDk per iOS
• Canale YouTube di Google Maps Platform
• Codelab di Google Maps Platform
• Progetti open source di Google Maps Platform su GitHub