Con il tutorial di oggi vedremo come usare le mappe di google all’interno delle nostre applicazioni. Il programma che creeremo ci permetterà di visualizzare la mappa di google, scegliere il tipo di visualizzazione mostrata tra standard, satellite o ibrida, abilitare o disabilitare le funzioni di zoom e scroll utilizzabili tramite il multitouch e mostrare la nostra posizione sulla mappa. Tutto ciò è reso possibile grazie Framework MapKit, che dovremo ovviamente aggiungere al nostro progetto.
Creiamo un nuovo progetto, scegliendo dai template proposti “View-based Application”, diamo il nome alla nostra applicazione, ad esempio “mappe”, scegliamo la posizione dove salvare e proseguiamo. Prima di tutto aggiungiamo il framework. Per farlo cliccate col pulsante destro del mouse sulla cartella “Resources” dentro “Groups & Files”, cliccate quindi su “Add” e infine su “Existing Frameworks…”. Selezionate mapKit.framework, quindi cliccate su Add:
Apriamo ora il file “mappeViewController.h” e inseriamo il codice seguente:
#import
#import
@interface mappeViewController : UIViewController {
IBOutlet MKMapView *mapView;
IBOutlet UISwitch *switchZoom;
IBOutlet UISwitch *switchScroll;
IBOutlet UIButton *cmdMiaPosizione;
IBOutlet UISegmentedControl *segmentTipoMappa;
}
- (IBAction)gestioneZoom:(id)sender;
- (IBAction)gestioneScroll:(id)sender;
- (IBAction)visualizzaMiaPosizione:(id)sender;
- (IBAction)mostraTipoMappa:(id)sender;
@end
Come potete vedere, abbiamo provveduto ad importare il framework grazie all’istruzione “#import MapKit/MapKit.h” e a specificare il protocollo “MKMapViewDelegate”. Abbiamo inoltre dichiarato 5 oggetti di tipo IBOutlet, che collegheremo poi ad altrettanti oggetti creati in Interface Builder. Le dichiarazioni comprendono la vista della mappa di tipo MKMapView, due controlli switch per il controllo di zoom e scroll di tipo UISwitch, un pulsante UIButton che useremo per mostrare la nostra posizione e un UISegmentedControl che useremo infine per scegliere il tipo di visuale per la mappa. Dopodichè abbiamo dichiarato i 4 metodi che ci permetteranno di eseguire le operazioni appena descritte.
Apriamo ora il file “mappeViewController.m” e andiamo a scrivere il codice dei nostri metodi.
- (IBAction)gestioneZoom:(id)sender{
if (switchZoom.on){
mapView.zoomEnabled=TRUE;
} else {
mapView.zoomEnabled=FALSE;
}
}
- (IBAction)gestioneScroll:(id)sender{
if (switchScroll.on){
mapView.scrollEnabled=TRUE;
} else {
mapView.scrollEnabled=FALSE;
}
}
- (IBAction)visualizzaMiaPosizione:(id)sender{
mapView.showsUserLocation=TRUE;
}
- (IBAction)mostraTipoMappa:(id)sender{
if ([segmentTipoMappa selectedSegmentIndex]==0) {
mapView.mapType = MKMapTypeStandard;
} else if ([segmentTipoMappa selectedSegmentIndex]==1) {
mapView.mapType = MKMapTypeSatellite;
} else if ([segmentTipoMappa selectedSegmentIndex]==2) {
mapView.mapType = MKMapTypeHybrid;
}
}
Il codice è molto semplice, analizziamolo brevemente. Per quanto riguarda il controllo di zoom e scroll, non facciamo altro che verificare se lo switch è in stato ON e in quel caso abilitiamo la relativa funzione settandola a TRUE, in caso contrario, grazie a FALSE, la funzione cesserà di funzionare. Anche il codice inerente la visualizzazione della propria posizione sulla mappa è molto semplice e non facciamo altro che impostare la proprietà showsUserLocation della mapView a TRUE. L’ultimo medoto, infine, verifica quale pulsante dell’UISegnmentedControl è stato premuto e imposta la visuale corrispondende tramite “MKMapTypeStandard” per la visuale Standard, “MKMapTypeSatellite” per quella dal satellite e “MKMapTypeHybrid” per la visuale ibrida, un mix delle due precedenti.
A questo punto non ci resta che disegnare la nostra interfaccia grafica con Interface Builder ed effettuare i rispettivi collegamenti tra gli oggetti IB e quelli creati via codice da Xcode. Apriamo il file “mappeViewController.xib” e trasciniamo nella View i seguenti oggetti:
- N. 1 MKMapView
- N. 2 UISwitch
- N. 1 UIButton
- N. 1 UISegmentedControl
- N. 2 UILabel
Posizioniamoli quindi in modo che la vostra vista sia simile a quella mostrata in figura:
Le impostazioni di default per questi controlli vanno più che bene per questo tutorial. Unica accortezza la proprietà “Segments” dell’UISegmentedControl che dovrete settare a 3 in quanto saranno proprio 3 le scelte selezionabili dall’utente durante l’esecuzione della nostra applicazione. Ricordate inoltre di modificare il testo delle UILabel settandole a “Zoom” e “Scrool”. Settate il testo del pulsante inserendo “Mostra mia posizione” come testo visualizzato e infine inserite, tramite semplice doppio-click, le scritte “Standard”, “Satellite” e “Ibrida” nell’UISegmentedControl.
Ora cliccate su “File’s Owner” e tramite la finestra “Connections” effettuate i rispettivi collegamenti tra gli oggetti IB e quelli creati da codice, come mostrato nella prossima figura:
Ora potete salvare, chiudere Interface Builder e tornare ad Xcode. Cliccate su Build and Run e testate il programmino appena creato su iPhone Simulator o sul vostro dispositivo.
Video Tutorial
by David Pollak
Parte 1
Parte 2
22 Responses to “T#005 – Usare le mappe di google”
19 Novembre 2009
Mattecome si aggiunge anche la ricerca?
27 Novembre 2009
MatCiao complimenti per il tuo tutorial!!…sapresti spiegarmi come utilizzare le MKAnnotation (per esempio: mettere il Pin (lo spillino rosso che esce su Maps) nella mia posizione)??? thankssss!!
@ Matte:
Per la ricerca su google Maps hai bisogno di fare un interrogazione a GoogleMaps; tipo:
//Unisci in una stringa il comando google Maps insieme al
//valore che l’utente ha inserito in una textField (nel mio caso adressField.text)
NSString *myString = [NSString stringWithFormat:@”http://maps.google.com/maps/geo?q=%@&output=csv”, [addressField.text stringByAddingPercentEscapesUsingEncoding:NSUTF8StringEncoding]];
//Memorizzi tutto in un altra stringa
NSString *locationString = [NSString stringWithContentsOfURL:[NSURL URLWithString:myString]];
//Ti crei un’array composto che è composto dai valori della stringa prima creata separati dalla virgola; glli elementi ritornati sono 3: il primo è un volre numerico (200 se la ricerca è andata a buon fine), il secondo contiene la latitudine, il terzo la longitudine.
NSArray *listItems = [locationString componentsSeparatedByString:@”,”];
A questo punto hai un’array con la Latit. e la Longit. vedi tu come utilizzarli.
8 Dicembre 2009
AngeloScusa ma come fa a funzionare il tasto showuserlocation se non importi il framework location? Comunque le mkAnnotation interessano anke a me!! Grazie!!!
8 Dicembre 2009
GabrieleSalve a tutti e complimenti per questi tutorial!!
ho un grande problema con IB e le MKMapView perché, aprendo IB, non esiste all’interno della libreria la MKMapView da trascinare nella vista!
Ho seguito il tutorial passo passo, importando il framework e il file MapKit.h ma niente… nel codice mi viene “riconosciuta” la mapView e la sua proprietà mapType durante la digitazione, quindi non penso sia un problema di Xcode…
come posso risolvere?
IB non dovrebbe automaticamente aggiornare la libreria a seconda degli header inclusi e dei framework aggiunti?
ps
durante la build mi da errore “showsUserLocation” in quanto non esiste, nei sorgenti ho trovato “shouldShowUserLocation” che invece compila 😉
grazie a tutti!!
10 Dicembre 2009
angeloc’è qualcuno????
10 Dicembre 2009
Staff devAPPSi ci siamo.. ^^ a breve pubblicheremo la prossima guida sul MapKit..
(showUserLocation è una proprietà della classe MKMapView inclusa nel framework MapKit)
17 Dicembre 2009
angelook grazie!!
quando la pubblicherete la prossima guida sul MapKit?
grazie per le eventuali risposte!!
17 Dicembre 2009
Staff devAPPCredo nei prossimi giorni sarà online 😉
5 Febbraio 2010
AngeloMa la guida?!?:-(( sarebbe stata molto utile:-((
29 Marzo 2010
Video Tutorial di programmazione iPhone SDK (in italiano) | devAPP[…] Con il tutorial di oggi vedremo come usare le mappe di google all’interno delle nostre applicazioni. Il programma che creeremo ci permetterà di visualizzare la mappa di google, scegliere il tipo di visualizzazione mostrata tra standard, satellite o ibrida, abilitare o disabilitare le funzioni di zoom e scroll utilizzabili tramite il multitouch e mostrare la nostra posizione sulla mappa. Tutto ciò è reso possibile grazie Framework MapKit, che dovremo ovviamente aggiungere al nostro progetto. (visualizza l’articolo completo) […]
9 Aprile 2010
MatteoApplePer fare lo zoom sulle mappe ci sono due modi:
– Fare doppio clic sulla mappa;
– Tenere premuto il tasto “alt”, in moda da fare mostrare due puntini sullo schermo, che sono paragonabili alle nostra dita.
Spero di esservi stato d’aiuto.
10 Giugno 2010
hetabetaSalve a tutti, premesso che non ho mai scritto una riga di codice per iphone vorrei porvi una domanda: se viene fatta un’app con la mappa (come indicato nel tutorial) per utilizzarla occorre necessariamente una connessione a internet oppure c’è un modo di distribuire la mappa (o una sua parte) per poterla utilizzare offline?
Grazie
8 Ottobre 2010
devAPP – Tutorial Set #1 - iPhone Italia – Il blog italiano sull'Apple iPhone 4, iPhone 3GS e 3G[…] (Vai al tutorial completo) […]
8 Ottobre 2010
» devAPP – Tutorial Set #1[…] (Vai al tutorial completo) […]
21 Ottobre 2010
Gabriele@Hetabeta per l’argomento trattato in questo tutorial (ovvero GoogleMaps) la risposta alla tua domanda è No.
Ad ogni modo la guida promessa non è ancora stata pubblicata, ci sono speranze ?
Grazie in anticipo.
7 Dicembre 2010
Acar83Ciao! E’ se volessi usare una mappa google personalizzata? Come quelle di My Maps o ancor meglio quelle di Google Places?
Questo è il miglior sito del settore!
10 Maggio 2011
MaveDevFunziona perfettamente, grazie per il tutorial, sempre grandi!!
31 Agosto 2011
yes77Ciao
vorrei associare alla pressione del pulsante “trova mia posizione” l’animazione di zoom sulla posizione potendo decidere il longitudeDelta e latitudeDelta.
Ho provato ma lo zoom mi funziona solo la prima volta, se mi sposto nella mappa e ripremo il pulsante non ritorna più sulla mia posizione. qualche consiglio per favore?
15 Novembre 2012
Gio88Ciao,
ho implementato la mappa nella mia app. , ma non riesco a capire come mai usando il metodo showUserLocation la mappa mi porta a Cupertino e non dove sono realmente io ? Eppure ho eseguito la procedura passo passo e tutto il resto funziona perfettamente 🙁
22 Marzo 2013
iJimCiao, ho seguito il tutorial, ho creato un app con 3 viste, una Home e due viste.
Nella Home ci sono due tasti e quando clicco sul tasto per la vista 1 va tutto bene, quando invece clicco sulla vista dove ho creato la mappa ( seguendo il tutorial ) l’app crasha !!!!!
14 Maggio 2013
AmedeoCiao, innanzitutto complimenti per la guida, ottima come sempre. Volevo sapere come posso fare per far uscire le coordinate della mia posizione su un Label. Grazie.
22 Maggio 2013
emaCiao, grazie per il tutorial.
Mi pare di aver seguito tutti i passaggi e testando la mia app sul mio iphone funziona e non da errori. La mappa mi mostra la mia posizione, ma a un livello di zoom troppo basso, praticamente mi fa vedere l’Italia intera.
Suggerimenti?
Grazie