Tutorial Menampilkan Maps Menggunakan Android Maps API v2 dan MapFragment

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 :

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 :

<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 :

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

Kemudian tambahkan juga kode berikut di Android Manifest :

<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.

<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.

<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 :

<?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.

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

Android Maps v2 menunjukkan peta dunia dan Semarang

Android Maps v2

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 ! 🙂

UPDATE :

08 Februari 2014 : menambahkan meta data play services version pada Manifest untuk Google Play Services versi 14 ke atas





Download aplikasi kami di Google Play Store


89 Comments

  1. Ferdinand April 10, 2013
    • Herdi Naufal April 11, 2013
  2. oky May 4, 2013
    • Herdi Naufal May 4, 2013
      • oky May 7, 2013
        • Herdi Naufal May 7, 2013
          • richatrtd May 12, 2013
          • Herdi Naufal May 12, 2013
  3. odonks May 10, 2013
  4. donie May 17, 2013
    • Herdi Naufal May 18, 2013
  5. joice May 20, 2013
    • Herdi Naufal May 21, 2013
      • Uki widyarama November 30, 2014
  6. Randi May 26, 2013
  7. Randi June 6, 2013
  8. Randi June 21, 2013
  9. teguh July 16, 2013
  10. teguh July 25, 2013
  11. Andri September 16, 2013
  12. ImasDe September 26, 2013
  13. radit September 30, 2013
    • Hafizh Herdi Naufal October 4, 2013
  14. gani November 21, 2013
    • Hafizh Herdi Naufal November 24, 2013
      • gani November 24, 2013
        • Hafizh Herdi Naufal November 24, 2013
  15. eric November 22, 2013
    • Hafizh Herdi Naufal November 24, 2013
  16. eric November 27, 2013
  17. adirangga December 21, 2013
  18. okta February 17, 2014
  19. Muhammad Hardiansayah February 18, 2014
    • Hafizh Herdi Naufal March 12, 2014
  20. diastowo March 9, 2014
  21. Junita March 13, 2014
  22. isal March 21, 2014
    • Hafizh Herdi Naufal April 11, 2014
      • ragil December 29, 2014
  23. ary April 17, 2014
  24. hamdan April 22, 2014
  25. hilman May 1, 2014
    • Hafizh Herdi Naufal May 1, 2014
      • hilman May 2, 2014
        • Hafizh Herdi Naufal May 2, 2014
  26. agungs edge May 7, 2014
    • Hafizh Herdi Naufal May 7, 2014
      • agungs edge May 8, 2014
  27. endrico May 17, 2014
  28. taufik May 19, 2014
  29. hendri May 28, 2014
  30. evy September 15, 2014
  31. ayekgun September 24, 2014
  32. andy November 24, 2014
  33. Uki widyarama November 30, 2014
    • Hafizh Herdi Naufal December 14, 2014
  34. fauzi December 30, 2014
    • Hafizh Herdi Naufal December 31, 2014
      • fauzi December 31, 2014
  35. Cha March 6, 2015
  36. mahardhi Kuncoro March 17, 2015
    • Hafizh Herdi Naufal March 18, 2015
  37. ilham fadhli May 15, 2015
    • Hafizh Herdi June 5, 2015
  38. ayu May 15, 2015
    • Hafizh Herdi June 5, 2015
  39. rudini dg. mataro June 4, 2015
    • Hafizh Herdi June 5, 2015
  40. Bamz_Surya June 22, 2015
  41. fajar July 10, 2015
    • Hafizh Herdi July 10, 2015
      • fajar July 10, 2015
        • Hafizh Herdi July 10, 2015
  42. zakaria September 18, 2015

Leave a Reply