Skip to content →

[Android] Tutorial Google Maps v2

Sebenarnya sudah telat banget baru posting Google Map v2 sekarang tapi gapapa lah ya… Itung2 buat reminder aja! Jadi gini, sejak Android versi 3.0 keatas Google sudah merilis Google Map v2 nah setelah setelah Handphone Android merajalela sampe sekarang jarang banget Handphone Android berversi 2.3 alias Gingerbread atau dibawahnya beredar dipasaran, Google menghentikan Map yang versi 1. Nah sekarang mainannya di versi 2. Ada perbedaan cukup apik di v2 ini, yaitu fitur-fiturnya lebih bagus dan dari segi developing lebih dipermudah, untuk menggunakan fitur tertentu tinggal panggil methodnya saja.

1. Download Google Play Service

Google membuat Map v2 yang merupakan bagian dari Google Play Service, maka kita harus meng-include-kan library-nya. Kita harus mengunduh Google Play Service terlebih dahulu di SDK Manager. Buka SDK Manager boleh dari Eclipse maupun dari folder SDK Android. Setelah jendela SDK Manager terbuka, pada folder Extras install Google Play Service.

2. Import Google Play Service Ke Eclipse

Setelah download selesai, kita akan menggunakannya sebagai Library pada Project kita. Caranya dengan meng-import Google Play Service ke Eclipse agar bisa digunakan oleh Project kita.

  • Masuk ke Eclipse, pada menubar klik File – Import – General – Existing Projects Into Workspace
  • Klik Next, pada kolom Select Root Directory klik Browse dan cari Google Play Service pada alamat berikut [Android SDK]\extras\google\google_play_services\libproject\google-play-services_lib
  • Untuk mempermudah apabila suatu saat kita butuhkan lagi, centang kolom Copy Projects Into Workspace

 

3. Generate Google Maps API

Sama seperti Google Maps v1, kita membutuhkan kode SHA1 Fingerprint yang nantinya dapat kita generate menjadi Google API.

  • Kita membutuhkan keytool yang terdapat pada Java. Buka terminal dan pastikan posisi kita pada terminal ada di C:\Program Files (x86)\Java\jdk1.7.0_17\bin
  • Yang kita butuhkan berikutnya adalah file debug.keystore. Letak file keystore agak tersembunyi, namun untuk mengetahui letaknya kita bisa membuka Eclipse kemudian pada menubar klik Window – Preferences – Android – Build. Copy alamat yang terdapat pada kolom Default Debug Keystore.
  • Kembali ke Terminal, eksekusi perintah keytool -list -v -keystore “[KEYSTORE’s PATH]” -alias androiddebugkey -storepass android -keypass android 
  • Setelah perintah dieksekusi, akan muncul seperti dibawah ini 
  • Kemudian buka Google API Console
  • Pilh Service dan nyalakan Google Maps V2 
  • Pilih API Access dan klik Create New Android Key… 
  • Masukkan SHA1 Fingerprint disertai nama package project dipisahkan dengan semicolon (titik koma).

 

4. Membuat Project Android

Setelah kita mendapatkan Google Maps API, tahap selanjutnya adalah membuat project Android.

  • Buka Eclipse dan buat sebuah project Android.
  • Pastikan nama package yang digunakan sama dengan nama package yang kita daftarkan pada saat mendapatkan Google Maps API.
  • Klik kanan project, pilih Properties – Android. Masukkan library Google Play Service, klik Add kemudian pilih project yang akan dimasukkan. Pastikan bahwa Google Play Service telah kita import seperti pada langkah 2.
  • Kemudian buka AndroidManifest.xml, tambahkan kode dibawah ini untuk memasukkan Google Maps API
<meta-data
            android:name="com.google.android.maps.v2.API_KEY"
            android:value="YOUR_API" 
/>
  • Masih di AndroidManifest.xml tambahkan permission antara lain ACCESS_NETWORK_STATE, INTERNET, WRITE_EXTERNAL_STORAGE, ACCESS_COURSE_LOCATION, ACCESS_FINE_LOCATION, dan READ_GSERVICE

Kira-kira begini hasilnya

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="rio.swarawan.mencobamap.v2"
    android:versionCode="1"
    android:versionName="1.0" >

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="17" />

    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES" />

    <uses-feature
        android:glEsVersion="0x00020000"
        android:required="true" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="rio.swarawan.mencobamap.v2.MainActivity"
            android:label="@string/app_name" >
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>

        <meta-data
            android:name="com.google.android.maps.v2.API_KEY"
            android:value="AIzaSyAm4aBK1IvkA566nOxNSSFOiZkErsfUZuU" />
    </application>

</manifest>
  • Untuk menampilkan map, kita menggunakan fragment pada xml layout-nya
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" >

    <fragment
        android:id="@+id/map"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        class="com.google.android.gms.maps.MapFragment" />

</LinearLayout>

Pada dasarnya, seperti ini langsung kita Run Application sudah bisa langsung keluar Mapnya. Silakan Dicoba

 

5. Menampilkan Marker

  • Source code untuk menampilkan marker perhatikan kode dibawah ini
// latitude dan longitude
LatLng ALUN2SELATAN = new LatLng(-7.810026,110.363195);

// instansiasi MarkerOptions
MarkerOptions markerOptions = new MarkerOptions();
markerOptions.position(ALUN2SELATAN);
markerOptions.title("Alun2 Selatan, Yogyakarta");
markerOptions.snippet("Ini Contoh Doank....");

// masukkan ke Google Maps
map.addMarker(markerOptions);
  • Merubah icon marker, pertama kita harus memiliki icon yang tersimpan di drawable. Kemudian tambahkan code dibawah ini
markerOptions.icon(BitmapDescriptorFactory.fromResource(R.drawable.map1));
  • Untuk merubah lokasi kamera ke marker yang kita tentukan, tambahkan kode dibawah ini
// instansiasi CameraPosition
CameraPosition cameraPosition = new CameraPosition.Builder().target(ALUN2SELATAN).zoom(12).build();

// masukkan ke Google Map
map.animateCamera(CameraUpdateFactory.newCameraPosition(cameraPosition));
  • Ada 4 jenis Map yang ditawarkan pada Google Maps v2, yaitu Normal, Hybrid, Satellite, dan Terrain. Cara menggunakannya tinggal tambahkan kode dibawah ini
map.setMapType(GoogleMap.MAP_TYPE_NORMAL);
map.setMapType(GoogleMap.MAP_TYPE_HYBRID);		
map.setMapType(GoogleMap.MAP_TYPE_SATELLITE);
map.setMapType(GoogleMap.MAP_TYPE_TERRAIN);

Full Code :

public class MainActivity extends Activity {
static final LatLng ALUN2SELATAN = new LatLng(-7.810026,110.363195);

private GoogleMap map;
private MarkerOptions markerOptions;
private CameraPosition cameraPosition;

@Override
protected void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
	setContentView(R.layout.activity_main);
	map = ((MapFragment) getFragmentManager().findFragmentById(R.id.map)).getMap();

	markerOptions = new MarkerOptions();
	markerOptions.position(ALUN2SELATAN);
	markerOptions.title("Alun2 Selatan, Yogyakarta");
	markerOptions.snippet("Ini Contoh Doank....");
	markerOptions.icon(BitmapDescriptorFactory.fromResource(R.drawable.map1));

	cameraPosition = new CameraPosition.Builder().target(ALUN2SELATAN).zoom(12).build();
	map.animateCamera(CameraUpdateFactory.newCameraPosition(cameraPosition));
	map.addMarker(markerOptions);
	map.setMapType(GoogleMap.MAP_TYPE_HYBRID);
}
@Override
public boolean onCreateOptionsMenu(Menu menu) {
	getMenuInflater().inflate(R.menu.activity_main, menu);
	return true;
}
}

Sumber AndroidHive

Published in Android Java

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *