Desenvolupament d'aplicacions amb App Inventor

Tutorial Exemples     Recursos CITCEA
Llibre Projectes Dades pràctiques   Inici

Comandes per a Google Maps

En algunes aplicacions pot ser interessant mostrar un mapa de Google Maps, podem fer servir un mapa dinàmic o un d'estàtic.

Mapa dinàmic

Cal inserir un ActivityStarter i donar-li les següents propietats:

Propietat Valor
Action android.intent.action.VIEW
ActivityClass com.google.android.maps.MapsActivity
ActivityPackage com.google.android.apps.maps
DataUri Segons el que desitgem obtenir

Les opcions més habituals per a DataUri són les següents:

Opció Format Exemple
Centrar mapa en coordenades GPS (sense mostrar punt) 1 2 geo:Latitud,Longitud?z=Zoom geo:41.3847964,2.1134547?z=17
Mostrar punt en coordenades GPS geo:0,0?q=Latitud,Longitud geo:0,0?q=41.3847964,2.1134547
Mostrar punt en coordenades GPS posant-li etiqueta geo:0,0?q=Latitud,Longitud(Etiqueta) geo:0,0?q=41.3847964,2.1134547(ETSEIB UPC)
Mostrar punt en coordenades GPS centrant en el punt geo:Latitud,Longitud?q=Latitud,Longitud geo:41.3847964,2.1134547?q=41.3847964,2.1134547
Cercar una adreça geo:0,0?q=Adreça geo:0,0?q=Avinguda Diagonal 647, Barcelona
https://www.google.com/maps/dir/Adreça https://www.google.com/maps/dir/Avinguda Diagonal 647, Barcelona
Cercar un lloc geo:0,0?q=Lloc geo:0,0?q=ETSEIB
https://www.google.com/maps/dir/Lloc https://www.google.com/maps/dir/ETSEIB
Dibuixar una ruta entre dos punts 3 https://www.google.com/maps/dir/Inici/Final https://www.google.com/maps/dir/ETSEIB/MNAC
https://www.google.com/maps/dir/41.3847964,2.1134547/41.3684288,2.1528506,19
https://www.google.com/maps/dir/Avinguda Diagonal 647, Barcelona/MNAC
Dibuixar una ruta entre dos punts amb punts intermedis 3 4 https://www.google.com/maps/dir/Inici/Punt de pas/Final https://www.google.com/maps/dir/ETSEIB/MNAC/MACBA

Notes:

1   El valor de Zoom ha d'estar entre 1 i 23

2   Les coordenades poden provenir de la lectura d'un LocationSensor

3   Les adreces d'inici i final poden estar en qualsevol dels formats

4   Hi pot haver més d'un punt de pas

 

Mapa estàtic

Cal inserir un WebViewer al que li indicarem l'adreça que serà del tipus:

      https://maps.googleapis.com/maps/api/staticmap?size=AmplexAlt&center=Adreça&zoom=Zoom&maptype=roadmap

Per exemple:

      https://maps.googleapis.com/maps/api/staticmap?size=350x350&center=ETSEIB&zoom=15&maptype=roadmap

L'avantatge d'aquest mètode és que podem posar les adreces directament al navegador de l'ordinador quan volem fer proves.

A continuació hi podem posar aquelles coses que volem que apareguin sobre el mapa.

Així, per posar un parell de marcadors (ha d'anar tot en una línia):

      https://maps.googleapis.com/maps/api/staticmap?size=AmplexAlt&center=Adreça&zoom=Zoom
            &maptype=roadmap&markers=color:Color|Marca1|Marca2

Per exemple:

      https://maps.googleapis.com/maps/api/staticmap?size=350x350&center=ETSEIB&zoom=15
            &maptype=roadmap&markers=color:blue|ETSAB|EPSEB

Podem canviar la mida dels marcadors (les opcions són: tiny, small, med o normal) i poden tenir una etiqueta (d'un sol caràcter):

      https://maps.googleapis.com/maps/api/staticmap?size=AmplexAlt&center=Adreça&zoom=Zoom
            &maptype=roadmap&markers=color:Color|size:Mida|label:Punt 1|Marca1|Marca2

Per exemple:

      https://maps.googleapis.com/maps/api/staticmap?size=350x350&center=ETSEIB&zoom=15
            &maptype=roadmap&markers=color:blue|size:med|label:Punt 1|ETSAB|EPSEB

Si volem que les marques tinguin característiques diferents, haurem de repetir el format des d'&markers:

      https://maps.googleapis.com/maps/api/staticmap?size=350x350&center=ETSEIB&zoom=15
            &maptype=roadmap&markers=color:blue|size:med|label:1|ETSAB&markers=color:red|size:med|label:2|EPSEB&markers=color:green|size:med|label:3|Rectorat%20UPC

També podem posar una figura de color:

      https://maps.googleapis.com/maps/api/staticmap?size=AmplexAlt&center=Adreça&zoom=Zoom
            &maptype=roadmap&path=fillcolor:ColorDins|color:ColorLínia|weight:Gruix
            |Punt1|Punt2|Punt3|Punt4|Punt1

Per exemple:

      https://maps.googleapis.com/maps/api/staticmap?size=350x350&center=41.3842964,2.1154547&zoom=17
            &maptype=roadmap&path=fillcolor:green|color:red|weight:3
            |41.3851564,2.1160347|41.3838964,2.1166047|41.3834964,2.1149047|41.3847264,2.1143547|41.3851564,2.1160347

Podem posar diversos punts, amb un mínim de dos. Fixem-nos que el darrer punt que hem posat coincideix amb el primer. Aquesta utilitat dibuixa una línia que uneix cada punt amb el següent, per tant si no repetim el punt ens farà una figura oberta. Si posem un gruix 0 la línia no es dibuixarà. Si no posem la comanda fillcolor es dibuixarà la línia però no es pintarà el contingut.

 

 

 

 

 

 

 

 

 

 

Llicència de Creative Commons
Aquesta obra d'Oriol Boix està llicenciada sota una llicència no importada Reconeixement-NoComercial-SenseObraDerivada 3.0.