Map Fragment

Di pagi hari ini saya akan sedikit berbagi tentang bagaimana cara membuat/menampilkan peta pada Android menggunakan Android Maps API v2. Sebenarnya tutorialnya sudah jadi sejak lama, namun baru ada kesempatan mengepost-nya sekarang, harap maklum.

Sebelumnya saya sudah pernah membuat tutorial tentang cara menampilkan peta pada Android, namun karena Android Maps v1 sudah deprecated / tidak berlaku. Maka tutorial tersebut otomatis sudah nggak bisa dijalankan lagi. Dan kali ini API yang digunakan adalah Android Maps API v2.

Pre-Requisites

Sebelum ke tutorial, ada beberapa hal yang harus kalian lakukan. Yaitu seperti di bawah ini :

• Kalian mungkin ingin membaca insight tentang Android Maps API v2 (opsional)
  
• Panduan mendapatkan Google Play Services SDK (wajib)
• Panduan mendapatkan Android Maps v2 API Key (wajib)

Touching Ground

Oke, pada dasarnya tutorial ini sangatlah simpel. Cuma mumngkin persiapannya seperti download Google Play Services SDK, mendapatkan API key, yang agak rumit. Tapi tenang saja, asal kalian mengikuti tutorial saya, kalian tidak akan tersesat hehe. Oh iya yang perlu diperhatikan lagi, tutorial ini tidak bisa berjalan di android emulator. Jadi kalian harus menggunakan handphone/smartphone Android asli untuk menjalankannya. Saya sendiri menggunakan Samsung Galaxy Mini pada tutorial ini.

Import Library Google Play Services dan tambahkan ke Project

Langsung saja, apabila kalian sudah melakukan langkah-langkah pre-requisites di atas, buka Eclipse. Pertama-tama, kaliah harus mengimport Android maps library yang ada di Google Play Services Library terlebih dahulu. Caranya sebagai berikut :

1. Pada Eclipse, pilih File > Import > Android > Existing Android Code Into Workspace dan klik Next.
2. Pilih Browse…, enter <folder-instalasi-android-sdk >/extras/google/google_play_services/libproject/google-play-services_lib
3. Centang pilihan copy to workspace, setelah itu klik Finish.

Kemudian buat project Android baru. Nama project-nya terserah, namun nama package-nya harus sama dengan nama package yang kalian gunakan untuk mendapatkan Android Maps v2 API Key. Jika sudah tambahkan Android Maps library di atas, caranya klik kanan pada project kalian > Properties. Pada kotak properties, lihat bagian bawah akan ada kotak untuk Library, klik Add. Dan tambahkan google-play-services_lib. Setelah itu klik OK untuk menutup Properties.

Import Android Support v4 Library

Tambahkan satu library lagi bernama android-support-v4 library. Caranya :

1. Pilih Project > Properties, pilih Java Build Path, dan pindah ke Libraries.
2. Pilih Add External Jars, tambahkan JAR di bawah ini, kemudian klik OK:
   • <android-sdk-folder>/extras/android/compatibility/v4/android-support-v4.jar

Oke, sekarang buka AndroidManifest.xml kita akan menambahkan beberapa permission yang dibutuhkan untuk menjalankan Android Maps dan juga API Key, jumlah permissionnya lumayan banyak. Pertama-tama kita akan menambahkan API Key terlebih dahulu, tambahkan kode berikut tepat sebelum tag </application> pada Android Manifest :

1 2 3

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

Ganti api_key_mu dengan API Key yang sudah kalian dapatkan. (Update) Jika kalian menggunakan Google Play Service versi 14 ke atas, tambahkan juga baris kode meta-data berikut ke Manifest :

1 2 3

<meta-data             android:name="com.google.android.gms.version"             android:value="@integer/google_play_services_version" />

Kemudian tambahkan juga kode berikut di Android Manifest :

1 2 3 4

<permission         android:name="com.example.mapdemo.permission.MAPS_RECEIVE"         android:protectionLevel="signature"/> <uses-permission android:name="com.example.mapdemo.permission.MAPS_RECEIVE"/>

Ganti com.example.mapdemo dengan nama package dari aplikasi kalian.

Setelah itu tambahkan permissions berikut ini.

1 2 3 4 5 6 7 8

<uses-permission android:name="android.permission.INTERNET"/> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> <uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES"/> <!-- The following two permissions are not required to use Google Maps Android API v2, but are recommended. --> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/>

Permission-permission di atas digunakan untuk mengakses beberapa fitur pada Android sesuai dengan namanya. Internet berarti kita meminta ijin untuk mengakses koneksi Internet. Dan juga beberapa akses lainnya seperti, melihat status jaringan, menulis data di storage eksternal, membaca layanan maps, dan akses lokasi kita.

Jika sudah, yang terakhir adalah menambahkan kode untuk menggunakan OpenGL ES version 2, karena ternyata OpenGL dibutuhkan untuk menjalankan Android Maps v2.

1 2 3

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

Oke, setelah Manifest selesai kita setting. Buka file main layout XML-nya. Ada di folder /res/layout/, jika tidak kalian rubah, file-nya bernama activity_main.xml. Kemudian copy pastekan kode berikut :

1 2 3 4 5 6

<?xml version="1.0" encoding="utf-8"?> <fragment xmlns:android="http://schemas.android.com/apk/res/android"           android:id="@+id/map"           android:layout_width="match_parent"           android:layout_height="match_parent"           android:name="com.google.android.gms.maps.SupportMapFragment"/>

Pada aplikasi maps ini, kita akan menggunakan MapFragment dan bukan MapView seperti pada Android Maps API versi sebelumnya. Sehingga di file xml kita menggunakan fragment element. Nah sayangnya elemen fragment itu hanya didukung oleh Android versi Honeycomb ke atas, sehingga di awal tadi kita diharuskan untuk menambahkan android-support-v4 library, supaya aplikasi kita tetap bisa menggunakan fragment walau dijalankan pada Android versi Honeycomb ke bawah (contoh Gingerbread/Froyo)

Setelah itu, buka file program utamanya. Default-nya bernama MainActivity.java jika sudah, copy pastekan kode dibawah ini.

01 02 03 04 05 06 07 08 09 10 11 12 13

package ganti.dengan.nama.packagemu;   import android.os.Bundle; import android.support.v4.app.FragmentActivity;   public class MainActivity extends FragmentActivity {       @Override     protected void onCreate(Bundle savedInstanceState) {         super.onCreate(savedInstanceState);         setContentView(R.layout.activity_main);     } }

Jangan lupa untuk mengganti ganti.dengan.nama.packagemu dengan nama package kalian. Pada dasarnya di MainActivity kita hanya menambahkan kode untuk mewarisi(extends) FragmentActivity pada aplikasi kita. Selebihnya kodenya nggak banyak berubah.

Jika sudah, bisa langsung dijalankan aplikasinya dengan catatan tidak boleh dijalankan di emulator! Jika benar, maka tampilannya adalah seperti berikut :

Android Maps v2 menunjukkan peta dunia dan Semarang

Android Maps v2 | Kiri : zoom maksimum – Kanan : Peta Djakarta

Bisa dilihat, kota Jakarta bernama Djakarta pada Android Maps v2. Kenapa ya? :D. Kira-kira cukup sekian tutorialnya, semoga bermanfaat. Jika ada yang kurang jelas tanyakan di komentar !