venerdì 15 marzo 2013


HABEMUS MBC!


 HOW TO CREATE AN ANDROID PROJECT USING GOOGLE MAPS API V2
-
COME CREARE UN PROGETTO ANDROID USANDO LE GOOGLE MAPS API V2

Aaaaaaall right, folks.
This evening I decide to explain you how to create an Android Project using Google Maps API V2.
First of all let me say that using V2 API
  1. it's a bit harder then V1 API, cause the libs for Maps are not contained in a .jar archive, but must be imported as a project library;
  2. make your life easier while you programming your app's activities. The listeners have been optimezed, most of the logic has already been implemented, so the benefits are greater difficulties.
Let's start.

So you're already an Android Dev, you paid your life-long-fee, and you get your API KEY from your API CONSOLE.

Then open Eclipse, click on "Android SDK Manager", then check that "Google play services" is installed. If not, download it

1.1 How to check if you have Google Play Services
Ok, now you've got all you need to use maps.

- Create a new Android Project,

call it "Gennarino", or "Francis_FROM_Coppola" if you like it. Or "PrjBase" if you're indescribably boring. 

- Then go to your "androidManifest.xml" 

and add the highlighted strings, like in the pics below...

1.2 androidManifest.xml - ADDING PERMISSIONS AND OTHER SETTINGS

1.3 androidManifest.xml  - ADDING API KEY

... from which all of you can understand how boring I am... ;)
By the way, let's stop a moment for explaining.
  • <permission       
    android:name="prjbase.main.permission.MAPS_RECEIVE"
            android:protectionLevel="signature" />
    It means that you ask to your OS the permission for receiving MAPS, using a "signature" (your API KEY);
  •  <uses-feature     android:glEsVersion="0x00020000"
  •      android:required="true" />

  • That's indicates the openGL ES version (in this case the 2, look in the middle of 0), and if it's required;
  • <uses-permission ...../>Those strings are simples, and are similar to permission in the use; they indicate which permission this app is authorized to use;
  •  <meta-data           
    android:name="com.google.android.maps.v2.API_KEY"
                android:value="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" />      
  • Here you must put your API KEY V2 instead of xxx...

- LET'S MODIFY OUR map.xml VIEW

adding a fragment that will contain our map. Google ha decided to use MapFragments instead of MapView, probably for increasing performances. However that is, so do like in the pic

1.4 Adapting you map view

Ok, we have updated the manifest, and added the fragment to the view. Now we have to

- IMPORT google-play-services_lib AS A PROJECT LIB

First of all we have to right click on the white space of our package explorer, then select import and choose "EXISTING ANDROID CODE INTO WORKSPACE"; 

BE CAREFUL: DON'T "EXISTING PROJECT INTO WORKSPACE"!!!


Then browse into you android-sdk directory, and go into

<your_android-sdk_DIRECTORY>\extras\google\google_play_services\libproject

 and click on finish.

1.5 How to import google-play-services_lib as project lib

Wow! You're great! That was the worst! Now let's see how 

- ADD THIS LIB INTO OUR PROJECT 

Yes, OUR, not YOUR, cause I've teached you how to make it, and your project is mine too!
So right click on OUR project, click on Properties, then Android tab. Go down after your list of Android devices, and finally you've reached the Library section.
Click on "Add" button, and select "google-play-services_lib", then OK.

1.6 Add google-play-services_lib into our project

WELL DONE, DELTA!
Now we must only

- LOAD OUR MAP FRAGMENT INTO OUR ACTIVITY

simply using this commenda, right after setContentView(R.layout.map);

map = ((MapFragment) getFragmentManager().findFragmentById(R.id.map_view)).getMap();

Let me say that the map is a private GoogleMap map; put outside the method onCreate(), into the Activity. Here is the code of map Activity




package prjbase.main;



import prjbase.global.Global;
import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.Toast;

import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.GoogleMap.OnInfoWindowClickListener;
import com.google.android.gms.maps.MapFragment;
import com.google.android.gms.maps.model.BitmapDescriptorFactory;
import com.google.android.gms.maps.model.CameraPosition;
import com.google.android.gms.maps.model.CircleOptions;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.Marker;
import com.google.android.gms.maps.model.MarkerOptions;
import com.google.android.gms.maps.model.PolygonOptions;

public class Map extends Activity {

@SuppressWarnings("unused")
private Global global;

private GoogleMap map;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.map);
//SET OUR MAP FRAGMENT AS THE MAP CONTAINER, AND ASSIGN IT TO GoogleMap OBJECT
map = ((MapFragment) getFragmentManager().findFragmentById(R.id.map_view)).getMap();

//INIT GLOBAL OBJECT
global=(Global)getApplicationContext();
//CENTER OUR MAP ON 38.0, 16.0
LatLng start=new LatLng(38.0, 16.0);
map.moveCamera(CameraUpdateFactory.newLatLngZoom(start, 15));
//CHANGE OUR CAMERA ANGLE (IN THIS CASE AT 45° ON Y AXIS)
map.moveCamera(CameraUpdateFactory.newCameraPosition(new CameraPosition(start, 0f, 45f,0f)));
//ADD A MARKER
MarkerOptions marker=new MarkerOptions()
.position(new LatLng(Global.macelloLatitude, Global.macelloLongitude))
.title("MACELLERIA SOCIALE")
.snippet("Nota anche come 'U SPITALA'")
.icon(BitmapDescriptorFactory.fromResource(getResources().getIdentifier("macello", "drawable", "prjbase.main")));

map.addMarker(marker);

// --> ANIMATE FROM CAMERA DISTANCE 15 TO 17 IN 2000 MILLISECONDS
map.animateCamera(CameraUpdateFactory.zoomTo(17), 2000, null);
// --> SET MAP TYPE
map.setMapType(GoogleMap.MAP_TYPE_SATELLITE);
// --> ACTIVATE "MY LOCATION" BUTTON (MOVE CAMERA ON YOUR LAT/LNG)
map.setMyLocationEnabled(true);
}
}


So guys, that's all. Today in the morning .it version!
Au 


_________________________________________________________________________________


HABEMUS MBC!


Ooooook, ragazzi,
Questa sera ho deciso di spiegarvi come creare un progetto Android usando le Google Maps API V2.
Prima di tutto fatemi dire che usare le API V2

  1. è un po' più difficile delle API V1, poiché le librerie per le Maps non sono contenute in un archivio .jar, ma devono essere importate come un progetto libreria;
  2. rendono la vostra vita più facile durante la programmazione delle activity della vostra app. I listener sono ottimizzati, molta della logica è già stata implementatata, quindi i benefici sono maggiori delle difficoltà.

Cominciamo.

Quindi siete già Sviluppatori Android (Android Developer), avete pagato la vostra quota a vita, e avete ottenuto la vostra API KEY dalla vostra API CONSOLE.

A questo punto aprite Eclipse, cliccate su "Android SDK Manger", quindi controllate che il servizio "Google Play Services" sia installato. Se non lo è, scaricatelo


1.1 Come controllare se è presente Google Play Services
Ok, ora avete tutto ciò che vi serve per usare le maps.

- Create un nuovo Progetto Android,

chiamatelo "Gennarino", o "Francis_FROM_Coppola" se vi piace. O "PrjBase" se siete indescrivibilmente noiosi.

- Quindi andate sul vostro "androidManifest.xml" 

e aggiungete le stringhe evidenziate, come nelle foto a seguire...

1.2 androidManifest.xml - AGGIUNGERE I PERMESSI E ALTRE IMPOSTAZIONI


1.3 androidManifest.xml  - AGGIUNGERE LA KEY

... dalle quali tutti voi potete capire quanto io sia noioso... ;)
Ad ogni modo, fermiamoci un momento per spiegare.
  • <permission     
    android:name="prjbase.main.permission.MAPS_RECEIVE"
            android:protectionLevel="signature" />Significa che voi chiedete al vostro Sistema Operativo il permesso per ricevere le MAPS, usando una firma (la vostra API KEY);
  •  <uses-feature     android:glEsVersion="0x00020000"
  •      android:required="true" />

  • Questa indica la versione delle openGL ES (in questo caso la 2, guardate in mezzo agli zeri), e se è richiesta;
  • <uses-permission ...../>Queste stringhe sono semplici, e simili ai PERMISSION nell'uso; indicano quale permesso l'app è autorizzata ad usare;
  •  <meta-data         
    android:name="com.google.android.maps.v2.API_KEY"
                android:value="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx" />      
  • Qua dovete inserire la vostra API KEY V2, al posto di xxx...

- MODIFICHIAMO LA NOSTRA VISTA map.xml

aggiungendo un FRAGMENT che conterrà la nostra mappa. Google ha deciso di usare i MapFragment invece delle MapView, probabilmente per aumentare le prestazioni. Comunque è così, quindi fate come in foto

1.4 Adattare la vostra vista mappa

Ok, abbiamo aggiornato il manifest, e aggiunto il fragment alla vista. Ora dobbiamo

- IMPORTARE google-play-services_lib COME PROJECT LIB

Prima di tutto dobbiamo cliccare col tasto destro sullo spazio bianco del nostro PACKAGE EXPLORER, quindi selezionare IMPORT e scegliere "EXISTING ANDROID CODE INTO WORKSPACE"; STATE ATTENTI: NON SCEGLIETE "EXISTING PROJECT INTO WORKSPACE"!!!


Quindi navigate all'interno della vostra directoru android-sdk, e andate in

<vostra_android-sdk_DIRECTORY>\extras\google\google_play_services\libproject

e cliccate su FINISH.

1.5 Importare google-play-services_lib come project lib

Wow! Grandi! Questo era il peggio. Ora andiamo in

- AGGIUNGERE QUESTA LIB NEL NOSTRO PROGETTO

Si, NOSTRA, non VOSTRA, perché vi ho insegnato come farla, e il vostro progetto è anche mio!
Quindi click destro sul NOSTRO progetto, click su Properties, quindi andate sul tab Android. Scendete fin dopo la listra dei dispositivi Android, e finalmente avrete raggiunto la sezione Library.

Cliccate sul tasto "Add", e selezionate "google-play-services_lib", quindi OK.

1.6 Aggiungere google-play-services_lib nel vostro progetto

BEN FATTO, DELTA!
Ora dovete solo

- CARICARE IL NOSTRO MAP FRAGMENT NELLA NOSTRA ACTIVITY

semplicemente usando questo comando, subito dopo il setContentView(R.layout.map);

map = ((MapFragment) getFragmentManager().findFragmentById(R.id.map_view)).getMap();

Fatemi dire che l'oggetto map è una  map private GoogleMap;  aggiungetelo all'esterno del metodo onCreate(), nell'activity. Questo è il codice della nostra map activity.





package prjbase.main;



import prjbase.global.Global;

import android.app.Activity;
import android.content.Intent;
import android.os.Bundle;
import android.view.KeyEvent;
import android.view.Menu;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.Toast;

import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.GoogleMap.OnInfoWindowClickListener;
import com.google.android.gms.maps.MapFragment;
import com.google.android.gms.maps.model.BitmapDescriptorFactory;
import com.google.android.gms.maps.model.CameraPosition;
import com.google.android.gms.maps.model.CircleOptions;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.Marker;
import com.google.android.gms.maps.model.MarkerOptions;
import com.google.android.gms.maps.model.PolygonOptions;

public class Map extends Activity {

@SuppressWarnings("unused")
private Global global;

private GoogleMap map;

@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.map);
//SET OUR MAP FRAGMENT AS THE MAP CONTAINER, AND ASSIGN IT TO GoogleMap OBJECT
map = ((MapFragment) getFragmentManager().findFragmentById(R.id.map_view)).getMap();

//INIT GLOBAL OBJECT
global=(Global)getApplicationContext();
//CENTER OUR MAP ON 38.0, 16.0
LatLng start=new LatLng(38.0, 16.0);
map.moveCamera(CameraUpdateFactory.newLatLngZoom(start, 15));
//CHANGE OUR CAMERA ANGLE (IN THIS CASE AT 45° ON Y AXIS)
map.moveCamera(CameraUpdateFactory.newCameraPosition(new CameraPosition(start, 0f, 45f,0f)));
//ADD A MARKER
MarkerOptions marker=new MarkerOptions()
.position(new LatLng(Global.macelloLatitude, Global.macelloLongitude))
.title("MACELLERIA SOCIALE")
.snippet("Nota anche come 'U SPITALA'")
.icon(BitmapDescriptorFactory.fromResource(getResources().getIdentifier("macello", "drawable", "prjbase.main")));

map.addMarker(marker);

// --> ANIMATE FROM CAMERA DISTANCE 15 TO 17 IN 2000 MILLISECONDS
map.animateCamera(CameraUpdateFactory.zoomTo(17), 2000, null);
// --> SET MAP TYPE
map.setMapType(GoogleMap.MAP_TYPE_SATELLITE);
// --> ACTIVATE "MY LOCATION" BUTTON (MOVE CAMERA ON YOUR LAT/LNG)
map.setMyLocationEnabled(true);
}
}

Bene ragazzi, è tutto. 
Au revoir!

4 commenti:

  1. Questo commento è stato eliminato dall'autore.

    RispondiElimina
  2. Ciao, ma se le mappe devono essere visualizzate su uno smartphone con versione 2.3.6 di android? L'app crasha. C'è un modo per risolvere? :(

    RispondiElimina
    Risposte
    1. Al momento non ti so dire con precisione.
      O meglio: puoi ancora utilizzare le vecchie app per testare e fare esercizio (comunque non fa male), ma se vuoi pubblicare un'applicazione sappi che Google non le supporta più (in soldoni non genera più chiavi per le app che usano le APIV1), e quindi vedrai una serie di quadratini bianchi e basta.

      Puoi però copiare qua sopra l'errore che ti appare sul LINT (il debugger), così vedo qual è il problema... Altrimenti alla cieca mi viene difficile ;)

      Elimina
  3. Al momento non ti so dire con precisione.
    O meglio: puoi ancora utilizzare le vecchie app per testare e fare esercizio (comunque non fa male), ma se vuoi pubblicare un'applicazione sappi che Google non le supporta più (in soldoni non genera più chiavi per le app che usano le APIV1), e quindi vedrai una serie di quadratini bianchi e basta.

    Puoi però copiare qua sopra l'errore che ti appare sul LINT (il debugger), così vedo qual è il problema... Altrimenti alla cieca mi viene difficile ;)

    RispondiElimina