GEOMAP-MARKER

PRAKTIKUM APLIKASI MOBILE
SEMESTER GASAL T.A. 2013/2014

MODUL 9
GEOLOCATION 2 : GOOGLE MAP API

LAB. JARINGAN KOMPUTER
PROGRAM STUDI TEKNIK INFORMATIKA
FAKULTAS TEKNOLOGI INDUSTRI
UNIVERSITAS ATMA JAYA YOGYAKARTA
2013
Praktikum Aplikasi Mobile
Semester Gasal 2013/2014
Lab. Jaringan Komputer FTI UAJY
Modul 9
Edited by Placydus Anom Bhayu Maharsi
assist.pam@gmail.com

2
Bab 9
GEOLOCATION 2 : GOOGLE MAP API

A. Tujuan
Pada modul Geolocation 2 ini, praktikan diharapkan mampu :
a. Memahami penggunaan Fragment untuk menampilkan peta
b. Memahami penggunaan dari google-api dan penerapannya pada aplikasi
c. Menambahkan marker(penanda) pada map dalam sebuah aplikasi

B. Dasar Teori
1. Google Map API
1.1. Pendahuluan
Aplikasi Android yang terdapat pada Google PlayStore akhir akhir ini
banyak yang menggunakan perangkat Map (peta) untuk menampilkan sebuah
lokasi pada sebuah peta yang dinamis dan interaktif bagi pengguna. Kelebihan
pada perangkat mobile khususnya Android memang dalam penggunaan lokasi,
seperti dibahas pada modul sebelumnya tentang location basic yang dapat
mengetahui posisi pengguna mobile phone android saat itu juga. Untuk modul
ini kelebihan pada penggunaan lokasi ini akan diintegrasikan dengan penyedia
layanan peta yang sudah sangat terkenal yaitu Google Map API. Google Map
API ini sudah disediakan untuk para pengembang aplikasi android agar dapat
mengakses layanan MAP dari google dengan menggunakan API key yang harus
diperoleh dengan mendaftarkan pada Google. API key ini merupakan bentuk
kerjasama dari Google dengan pengemban aplikasi Android, sehingga wajib
dimiliki oleh para pengembang aplikasi android yang ingin menggunakan
layanan Google Map API. Untuk dapat memperoleh API key akan dijelaskan
pada poin berikutnya. Sebelum itu , untuk dapat mengakses MAP dan
mengintegrasikan ke dalam aplikasi yang akan dibuat, pengembang harus
Modul 9

3
memahami beberapa elemen penting yang dibutuhkan untuk mengakses map,
yaitu : Google Map dan MapFragment.

1.2. Google Map
Suatu kelas yang menjadi kunci saat berkerja dengan map (peta) adalah
kelas GoogleMap. GoogleMap memperagakan objek peta pada sebuah aplikasi.
GoogleMap menangani operasi berikut secara otomatis :
o Menghubungkan ke layanan Google Maps.
o Mengunduh map-tiles.
o Menampilkan tiles pada layar perangkat.
o Menampilkan berbagai kontrol seperti pan dan zoom.
o Menanggapi gerakan zoom & pan dengan menggerakkan peta dan
memperbesarnya atau memperkecilnya.
Selain operasi-operasi otomatis diatas, GoogleMap dapat mengontrol
perilaku peta dengan objek dan metode dari sebuah API. Misalnya, GoogleMap
memiliki metode callback yang merespon penekanan tombol dan gerakan
sentuhan pada peta. GoogleMap juga dapat mengatur ikon penanda(marker) dan
menambahkan overlays untuk itu.

1.3. Map Fragment
Menggunakan Map Fragment adalah cara termudah untuk menggunakan
sebuah peta (Map) pada Aplikasi. Dengan menggunakan fungsi getMap() yang
dimiliki oleh kelas Map Fragment kita dapat mendapatkan peta yang berupa
fragment pada layout dan mengendalikannya pada sebuah kelas Java.

Modul 9

4
1.4. Permission & Library
Seperti pada modul location basic, Android mendefinisikan schema
permission untuk melindungi sumber daya dan fitur dari device. Untuk
mendapatkan akses data google maps diperlukan pendeklarasian :
<meta-data
android:name="com.google.android.maps.v2.API_KEY"
android:value="API_KEY"/>
<permission
android:name="com.example.mapdemo.permission.MAPS_RECEIVE"
android:protectionLevel="signature"/>
<uses-permission
android:name="com.example.mapdemo.permission.MAPS_RECEIVE"/>

Kemudian permissions yang diperlukan Google Map Android API ialah :
- android.permission.INTERNET Digunakan oleh API untuk mengunduh
map tiles dari Google Map.
- android.permission.ACCESS_NETWORK_STATE Memperbolehkan API untuk
memeriksa status koneksi
- com.google.android.providers.gsf.permission.READ_GSERVICES
Memperbolehkan API untuk mengakses Google web-based services.
- android.permission.WRITE_EXTERNAL_STORAGE Memperbolehkan API
untuk meng-cache map tile data di media penyimpanan external perangkat.
- android.permission.ACCESS_COARSE_LOCATION Memperbolehkan API
untuk menggunakan WiFi atau mobile cell data (atau keduanya) untuk
mendapatkan lokasi perangkat.
- android.permission.ACCESS_FINE_LOCATION Memperbolehkan API untuk
menggunakan GPS untuk mendapatkan lokasi perangkat kedalam daerah yang
sangat kecil.
Modul 9

5
Dikarenakan Google Maps Android API versi 2 membutuhkan OpenGL ES
versi 2, maka harus menambahkan code <uses-feature> element ke android
manifest seperti :
<uses-feature
android:glEsVersion="0x00020000"
android:required="true"/>

2. Mendapatkan API Key
Seperti disinggung sebelumnya, untuk dapat mengakses Google Map API
dibutuhkan API Key Versi 2. API key ini adalah kode yang di-generate oleh
Google untuk tiap developer yang ingin mengembangkan aplikasi berbasis map.
API Key ini di generate dari kode SHA1 yang terdapat Eclipse pada komputer
masing masing. Berikut langkah langkah untuk pendaftaran API Key.
1. Buka Eclipse > Preferences > Android > Build

Modul 9

6
Amati certificate fingerprint pada SHA1. Kode itulah yang akan digunakan
untuk mendaftarkan API Key.
2. Masuklah ke website berikut dan lakukan login menggunakan akun gmail :
https://code.google.com/apis/console/

Gambar 8.4

3. Untuk dapat mendaftarkan API key diperlukan sebuah akun google, lalu
masuk pada navigasi API Access pada bagian kiri seperti gambar 8.5:
Modul 9

7

Gambar 8.5

4. Lalu setelah masuk ke API Acces arahkan ke bawah dan pilih tombol create
new android key untuk terlebih dahulu mendaftarkan aplikasi yang akan dibuat
pada google sehingga dapat diperoleh API Key yang dibutuhkan.

Gambar 8.6

5. Akan muncul tampilan untuk dapat memasukkan certificate fingerprint
(SHA1), yang tadi sudah diperoleh. Lalu pada kolom tersebut masukkan :
(Certificate fingerprint(SHA1));namaPackage yang akan dibuat.
Contoh :
69:C3:8C:44:9E:98:1D:E2:98:9D:A4:E9:EA:0A:F0:8E:93:80:6C:9A;com.example.mapguid
ed
Maka nama package yang akan digunakan untuk projek adalah :
com.example.mapguided
Modul 9

8
Lalu klik create:

Gambar 8.7

6. Perhatikan pada halaman yang baru terbuka adalah hasil pendaftaran dari
fingerprint dan nama projek tadi adalah sebagai berikut :

Gambar 8.8

API Key sudah terbentuk dan simpan baik baik API key karena selanjutnya
akan digunakan untuk develop projek. Perlu diketahui bahwa API key ini unik
hanya digunakan pada tools(eclipse), yang digunakan untuk mendaftarkan API
Modul 9

9
key, dan hanya berlaku untuk satu projek saja (dalam kasus ini
com.example.mapguided).

3. Setting Emulator ( Genymotion )
Pada modul ini, gunakan Galaxy Nexus 4.2.2 with Google Apps API 17
720x1280 dan seting ukuran emulator menjadi 480x800 240 dpi agar emulator
menjadi lebih ringan. Instalasi Genymotion Emulator terlampir pada dokumen
yang berbeda.

a. Guided 1 Tampilkan Google Map Beserta Marker
Poin yang dipelajari dalam Guided 1 ini adalah :
Memahami penggunaan Fragment.
Memahami cara menampilkan Map.
Memahami cara peletakan API Key.
Memahami penggunaan variabel GoogleMap.

1. Buatlah projek baru dengan spesifikasi :
Application Name : MapguidedXXXX_1
Project Name : MapguidedXXXX_1
Package Name : com.mapguidedXXXX_1
Minimum Required SDK : API 15 Android 4.0.3
Target SDK : API 17 Android 4.2
Compile With : API 17 Android 4.2
Theme : None

2. Import google-play-services_lib pada workspace kalian, klik File -> import
-> Android -> Existing Android Code Into Workspace -> Browse -> Masuk
Modul 9

10
ke folder android-sdk kalian -> Extras -> google -> google_play_services -
> libproject -> pilih google-play-services_lib.
Setelah itu, klik kanan pada folder project kalian, lalu pilih propertis, pilih
android dan add google-play-services_lib sebagai library project kalian.
Lakukan tahap ini setiap pembuatan project kalian.

3. Buatlah layout seperti gambar di bawah ini,
Modul 9

11

Code layout xml :

4. Pada Android Manifest, deklarasikan terlebih dahulu permission dan
librarynya:

Modul 9

12

Isikan android:value dengan API Key hasil generate dari PC/Laptop
masing-masing.

5. Lalu mulailah bentuk kelas MainActivity.java. Deklarasikan variable yang
akan digunakan.

6. Lakukan inisialisasi pada variable map.

7. Buatlah sebuah prosedur untuk menambahkan sebuah marker beserta
komponennya.
Modul 9

13

(marker adalah gambar.png sebagai penanda )
Dapatkan gambar di sini :
https://www.dropbox.com/s/jghi2qm19wsvrhu/marker.png

8. Panggilan prosedur initializeMap() dan addingMarker() pada override
method OnCreate.

9. Jalankan aplikasi.
Modul 9

14

b. Guided 2 Menampilkan Rute pada Peta
Poin yang dipelajari adalah :
- Memahami cara menambahkan sebuah rute (path) ke dalam peta
menggunakan GoogleAPI Direction.

1. Buatlah projek baru dengan spesifikasi :
Modul 9

15
Theme : None

2. Buatlah layout seperti di bawah ini :

Dengan kode layout xml seperti berikut :

3. Lalu tuliskan permission dan library untuk projek ini.
Modul 9

16

Isikan android:value dengan hasil generate API Key dari masing-
masing PC/Laptop.

4. Setelah mendeklarasikan permission dan library yang akan digunakan,
dapat mulai membuat kelasnya. Buat sebuah kelas baru dengan nama :
JSONParser.java. Kemudian bentuklah kelas tersebut dengan kode di
bawah ini.
Deklarasikan variable-variable yang akan digunakan pada kelas ini beserta
konstruktornya.
Modul 9

17

Buatlah sebuah fungsi untuk melakukan HTTP Request.

Modul 9

18
Buatlah sebuah fungsi untuk membentuk sebuah URL yang akan
digunakan untuk merequest JSON.

5. Lalu setelah membentuk kelas untuk JSONParser, bentuklah kelas
MainActivity.java dengan kode berikut :
Deklarasikan variable yang akan digunakan pada kelas ini :

Lalu deklarasikan prosedur untuk menginisialisasi map :

Modul 9

19
Lalu buat fungsi untuk men-decode polyline :

Modul 9

20
Kemudian buatlah fungsi untuk menambahkan sebuah path pada peta :

Modul 9

21
Kemudian buatlah fungsi untuk melakukan eksekusi terhadap fungsi-fungsi
yang digunakan untuk menambahkan rute/path pada peta.

Modul 9

22
Terakhir, panggilah fungsi-fungsi yang sudah dibentuk pada override
method OnCreate.

6. Run aplikasi :

Modul 9

23
c. Guided 3 Geocode & Reverse Geocode
Poin yang dipelajari dalam Guided 3 ini adalah :
Memahami cara melakukan reverse geocode.
Memahami cara melakukan geocode.
Memahami cara menggabungkan antara marker, map dan geocoding

a. Buatlah projek baru dengan spesifikasi :
Theme : None
b. Projek ini akan menampilkan alamat berdasarkan lokasi, menampilkan
lokasi berdasarkan alamat, dan menampilkan sebuah marker.
c. Mulailah bentuk projek ini. Buat layout terlebih dahulu seperti gambar
di bawah ini.

Modul 9

24

Modul 9

25
d. Code xml layout :

Modul 9

26

e. Lalu tuliskan permission dan library untuk projek ini dengan langkah
yang sama seperti guided sebelumnya.
f. Setelah membuat layout dan permissionnya, maka mulailah buat kelas
java-nya. Yaitu :
- JSONParser.java
- MainActivity.java
Modul 9

27
g. Kemudian mulailah bentuk kelas JSONParser.java dengan kode di
bawah ini. Pada kelas JSONParser.java kali ini sedikit berbeda dengan
kelas JSONParser.java yang ada pada guided sebelumnya, karena pada
guided kali ini akan melakukan dua Google Maps Webservice API
yang berbeda ( Geocode & Reverse Geocode ) maka terdapat dua buah
fungsi MakeURL yang berbeda pula.

Modul 9

28

Modul 9

29
h. Lalu bentuklah kelas MainActiviy.java, pertama deklarasikan variable-
variable yang akan digunakan pada kelas ini.

i. Kemudian buatlah fungsi override dari pengimplentasian kelas
OnMarkerClickListener.

j. Kemudian buatlah fungsi untuk menginisialisai komponen yang ada.

k. Kemudian buatlah fungsi untuk menginisialisasi Map yang digunakan.
Modul 9

30

l. Kemudian buatlah prosedur untuk menambahkan marker pada peta.

m. Kemudian buatlah prosedur untuk melakukan handle terhadap action
click sebuah button.

n. Kemudian buatlah sebuah prosedur untuk melakukan inisialisasi ulang
pada Map dan penambahan marker ketika lokasi berubah.
Modul 9

31

o. Kemudian buatlah prosedur untuk menampilkan alamat pada sebuah
TextView.

Modul 9

32
p. Kemudian buatlah sebuah kelas Asynchronous pada kelas ini dengan
nama connectAsyncTask_geocode guna melakukan akses Google Maps
Webservice API.

q. Kemudian buatlah juga sebuah kelas Asynchronous untuk proses
Reverse Geocode.
Modul 9

33

r. Setelah selasai membentuk kelas MainActivity.java, kemudian jalankan
projek, maka hasilnya akan seperti pada gambar di bawah ini.
Modul 9

34

Modul 9

35

SOAL PEMAHAMAN

Ketentuan :
1. Kerjakan dalam kertas HVS A4 ditulis tangan,
2. Berikan identitas Nama, NPM, Kelas,
3. Kumpulkan pada saat akan mengikuti praktikum pada kelas dan modul
yang bersangkutan.
4. Soal yang dikerjakan bersifat wajib!

Pertanyaan :
1. Jelaskan bagaimana proses inisialisasi sebuah peta (Map) !
2. Jelaskan bagaimana proses melakukan proses Reverse Geocode pada
guided 3 !

GEOMAP-MARKER

Diunggah oleh

Informasi Dokumen

Deskripsi Asli:

Judul Asli

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

GEOMAP-MARKER

Diunggah oleh

Hak Cipta:

Format Tersedia

PRAKTIKUM APLIKASI MOBILE

SEMESTER GASAL T.A. 2013/2014

Anda mungkin juga menyukai