Android Tutorial : Menampilkan Peta Google Maps Dengan Google Maps v2 di Aplikasi Android

android osNangkring di kampus lagi, demi sesuap koneksi inet super duper kenceng untuk update SDK android di laptop kesayangan saya. Setelah sebelumnya saya kelayapan kemana-mana menenangkan pikiran yang mumet gak karuan gara-gara faktor X, ini gak ada acara sangkut pautnya sama acara X-Factor lho yaw. Iseng-iseng main ke berbagai belahan group FB yang saya ikuti, akhirnya nangkringlah saya di group FB kampus. Disana ada wacan baru kalau akan ada peraturan tidak boleh merokok di kampus. Wah..wah..saya yang tergolong perokok kelas berat terancam digusur dan mungkin gak bisa menikmati wifi super ngebut lagi disana. 

Nah, ngomong-ngomong soal kampus, dulu sempat ada teman kampus yang bertanya tentang cara menampilkan google map di android. Kebetulan saya dulu sudah pernah menulis tutorial tersebut. Ternyata pas dicoba dan ini membutuhkan api key dari google, caranya berbeda dengan yang dulu saya praktekkan. Ternyata google telah memperbaharui Google Map nya menjadi ke Versi 2 alias sudah di-upgrade. Otomatis semua aturan berubah, coding juga berubah. Dan ternyata caranya cukup ribet. Iseng-iseng deh saya main ke situs Google Developers untuk cari-cari info tentang Google Maps yang baru. Akhirnya ketemu juga sedikit pencerahan untuk menampilkan peta google maps di android. Berikut caranya :

1. Disini seperti biasa saya memakai eclipse ADT bundle yang menurut saya sangat praktis dan gak pake ribet seperti saya dulu saat pertama kali kenalan sama yang namanya dunia per-android-an. Buka android SDK Manager, ini butuh koneksi internet karena kita harus menambahkan library google play services. Setelah muncul daftar SDK dan tetek bengeknya, centang Google Play Services. Tunggu sampai library selesai diinstal.

2. Setelah itu buat sebuah android project baru, kira-kira namanya WisataKuliner.

3. Kita akan membutuhkan google map key dimana pada saat masih versi 1, caranya cukup mudah yaitu hanya dengan mendaftarkan hasil generate SHA1 dari debug.keystore. Sekarang caranya beda lagi dan cukup rumit -_-.

4. Cari file debug.keystore di folder .android. Kalau pakai windows, file debug.keystore ada di direktori C:/Users/nama_user/.android/debug.keystore. Sedangkan kebetulan saya pakai mac, filenya ada di /Users/nama_user/.android/debug.keystore dalam posisi hidden.

5. Buka terminal, jalankan perintah berikut. Sesuaikan direktori file debug.keystore sesuai dengan milik rekan-rekan.

keytool -list -v -alias androiddebugkey -keystore /Users/gedesumawijaya/.android/debug.keystore -storepass android -keypass android

6. Catat hasil dari SHA1

0F:FC:A2:AE:EF:E6:7E:C4:D7:8B:30:78:7B:40:21:0D:B5:C1:8A:BA

7. Sekarang buka link https://code.google.com/apis/console. Syaratnya yaw so pasti harus punya dan masuk ke akun gmail terlebih dahulu. Klik Create Project

8. Pada menu Services, aktifkan menu Google Maps Android API V2

9. Klik menu API Access, dan klik link Create New Android Key. Masukkan kode SHA1 yang sudah kita dapatkan di atas. Klik Create.

10. Maka akan muncul API key nya dan ini yang akan kita gunakan di aplikasi petanya.

11. Kini kita beralih ke IDE eclipse. Pilih menu Import, disini kita akan memasukkan library Google Play Services sebagai library project. Tentukan alamat root direktorinya kira-kira seperti ini /Users/gedesumawijaya/Downloads/Folx/application/adt-bundle-mac-x86_64-20130219/sdk/extras/google/google_play_services/libproject/google-play-services_lib. Jangan lupa centang opsi copy project into workspace.

12. Karena bentuknya sudah sebagai library project, saatnya kita menambahkannya ke android project yang tadi sudah kita buat. Klik kanan pada project aplikasi, WisataKuliner > Properties. Maka akan muncul menu seperti di bawah ini. Klik tombol Add, dan pilih google play services.

13. Beralih ke file AndroidManifest.xml, saatnya kita mendaftarkan api key yang sudah kita dapatkan tadi.

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="dlmbg.pckg.wisata.kuliner"
    android:versionCode="1"
    android:versionName="1.0" >

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

    <permission
        android:name="dlmbg.pckg.wisata.kuliner.MAPS_RECEIVE"
        android:protectionLevel="signature" />

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

    <uses-permission android:name="dlmbg.pckg.wisata.kuliner.permission.MAPS_RECEIVE" />
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    <uses-permission android:name="com.google.android.providers.gsf.permission.READ_GSERVICES" />
    <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" />
    <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" />

    <application
        android:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name="dlmbg.pckg.wisata.kuliner.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="AIzaSyA1-em4L7pwaqjuOCPVNokFjfgy-c0ALK0" />

    </application>

</manifest>

14. Buka dan edit file layout activity_main.xml.

<RelativeLayout 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"
    tools:context=".MainActivity" >

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

</RelativeLayout>

15. Buka dan edit file MainActivity.java dengan kode di bawah ini :

package dlmbg.pckg.wisata.kuliner;

import android.app.Activity;
import android.os.Bundle;
import android.view.Menu;

import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.MapFragment;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.Marker;
import com.google.android.gms.maps.model.MarkerOptions;

public class MainActivity extends  Activity {
	  static final LatLng DENPASAR = new LatLng(-8.658075,115.211563);
	  private GoogleMap map;

	  @Override
	  protected void onCreate(Bundle savedInstanceState) {
	    super.onCreate(savedInstanceState);
	    setContentView(R.layout.activity_main);
	    map = ((MapFragment) getFragmentManager().findFragmentById(R.id.map)).getMap();
	    Marker denpasar = map.addMarker(new MarkerOptions()
	        .position(DENPASAR)
	        .title("Denpasar")
	        .snippet("Kota Denpasar - Kota Berwawasan Budaya"));

	    map.moveCamera(CameraUpdateFactory.newLatLngZoom(DENPASAR, 15));

	    map.animateCamera(CameraUpdateFactory.zoomTo(10), 2000, null);
	  }

	  @Override
	  public boolean onCreateOptionsMenu(Menu menu) {
	    getMenuInflater().inflate(R.menu.main, menu);
	    return true;
	  }

	}

16. Nah, ketika akan di-run, aplikasi tidak dapat dijalankan langsung ke emulator. Saya coba langsung ke hape android dan ternyata bisa. Mungkin ada beberapa komponen yang dibutuhkan untuk menjalankannya di emulator. Kira-kira hasil akhirnya seperti ini :

Memang sangat berbeda jauh cara untuk mendapatkan google map key di google map v2 ini. Dulu kita membuthkan google apis untuk menampilkan peta. Sedangkan sekarang kita cukup membuthkan google play services yang ukuran filenya terbilang lebih kecil. Dari segi fitur, memang google map v2 ini menawarkan banyak perubahan dan tambahan fitur yang lebih baik dibandingkan versi sebelumnya. OK deh, sekian dulu postingan saya malam ini. Semoga bermanfaat untuk rekan-rekan.

42 comments

  1. aan Reply

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

    ko error yah om
    pas getFragmentManager() is undefined
    knapa yah ??

      • gunita Reply

        iya bro udh diketik ulang , penjelasan erornya ko tentang target api ke API 11? pdhl API level yg baru kan pake api 16 or 17 itu gmn bro? tolong jawab ya bro

  2. ki Reply

    gan ane blum nyoba program nya tapi apa bener katanya api v2 ga bisa d jalanin d emulator???
    makasih gan

    • Gede Lumbung Post authorReply

      iya sih brow, harus ada yg diinstal gitu, filenya dalam bentuk .apk
      makanya ane tes langsung ke device 🙂

      • ki Reply

        oh gt ya.
        gan ko saya pas daftar api key gagal mulu ya pas masukin SHA1 nya??
        knp tuh gan?

          • ki

            udah pake yang 1.7 gan
            kalo eclipse nya copy dari temen ngaruh kaga gan?

          • Gede Lumbung Post author

            wah gak tau juga
            kalo ane sih pake eclipse adt bundle, udah enak tinggal pakai aja
            coba pakai yg eclipse adt bundle

  3. ray Reply

    gan kalo api v1 masih bisa d pake kaga?
    ane mau buat program pake api v1 nih

  4. afkhan Reply

    getFragmentManager() masih di silang mas, padahal dah ctrl+ spacee, kenapa ya????

      • teguh Reply

        permasalahan ane sama kayak yang di atas gan,sudah di ketik ulang tapi masih di silang dan errornya (Cannot cast from Fragment to MapFragment),kenapa itu gan??

        • gunita Reply

          SAMA gan !!!! sundul sundul masalah iniii…iya bro udh diketik ulang , penjelasan erornya ko tentang target api ke API 11? pdhl API level yg baru kan pake api 16 or 17 itu gmn bro? tolong jawab ya bro

          • Gede Lumbung Post author

            kemarin saya jg menemui kasus kayak gini,,
            saya bantu teman saya di laptop windowsnya, saya coba build ulang properties nya
            dan ternyata bisa

  5. Fian Reply

    brow pengen nanya nie .. kl ingin menampilkan lokasi tempat dalam radius tertentu .. gmn ya brow ?

  6. nyoman agus Reply

    Bli,, aq kan ngae aplikasi care “piano”.. gmn kodingnya biar tombol ditekan dari kiri kekanan atau sebalikne,,?… TQ

  7. doni her Reply

    gan java ane invalid mulu kalo daftarin api v2 nya gan..
    ane pake yg jdk 1.7

    gmn tu gan, ga bisa mulu api v2 nya.. pencerahan’y gan…

  8. teguh Reply

    ‘keytool’ is not recognized as an internal or external command,
    operable program or batch file.

    ini kenapa gan??? SHA1nya g’ bisa keluar

        • teguh Reply

          gan kalau boleh ane minta no ponselnya donk,biar cepat kalau tanya – tanya soal android,atau hubungi ane dulu di 085645565026,ane tunggu y gan..lagi kerjain skripsi gan,next ane ganti pulsanya ..

  9. gus surya Reply

    bli saya mw tanya,
    jika malahnya seperti 07-23 13:50:51.076: E/AndroidRuntime(30828): java.lang.NoClassDefFoundError: com.google.android.gms.R$styleable
    gmn yw???
    lo bleh mnt no hpny,mz k no 085739426696,ini lg ad suatu mslah pd mapny.
    mslh komisi nyante z.

  10. darwone Reply

    ane ada eror di mainactvity gan

    yang ini masih ada tanda silangnya

    import com.google.android.gms.maps.CameraUpdateFactory;
    import com.google.android.gms.maps.GoogleMap;
    import com.google.android.gms.maps.MapFragment;
    import com.google.android.gms.maps.model.LatLng;
    import com.google.android.gms.maps.model.Marker;
    import com.google.android.gms.maps.model.MarkerOptions;

    mhon pencerahanya gan? thanks

  11. deni Reply

    gan aplikasi ini bisa di jalankan di hp yg cusrom ga??minta tutorial yg aplikasi map v2 dg mysql n json dong

  12. Pingback: Android Tutorial : Aplikasi Untuk Menampilkan Titik Koordinat Pada Google Maps v2 Dengan PHP, MySQL, JSON | Ng`Blog Biar Gak GobloG – BlogNya Gede Lumbung

  13. Pingback: Android Tutorial : Menampilkan Peta Google Maps Dengan Google Maps v2 di Aplikasi Android | Riskun Blog

  14. Pingback: Android Tutorial : Aplikasi Untuk Menampilkan Titik Koordinat Pada Google Maps v2 Dengan PHP, MySQL, JSON | Riskun Blog

  15. ari Reply

    kalo setiap dijalankan selalu force close apakah karena jdk java 7 ane yak ?
    sha1 udah didapat, dan valid dari keytool,sha1 diambil via jdk terbaru lewat -v
    internet lancar jaya, setiap exe apk ini FC terus, step sudah di ikuti, selalu force close, ampek bingung kurangnya dimana, library juga udah dimasukin..

    mungkin bisa memberikan pencerahan kepada saya..trims

  16. eka Reply

    kak mau tanya nih.. aku buat map dengan api v2..
    setelah di run di emulator dy kagak keliatan apa. putih semua.
    tapi saat di run langsung lewat device dy force close. Apa masalahnya kira2 ?
    Ada solusi gak?

  17. Adie Reply

    Ud coba gada yang error, tapi waktu d jalan kan di device peta ny gg muncul cuma tmbol zoom aja, knp ya gan?

  18. aan Reply

    gan mau nanya,kalau mau buat peta dan lokasi tempat didalam kampus semisal kantin,laboratorium,loket,ruang jurusan dll, di android apa saja yang diperlukan dan bagaimana langkah2nya?