Saturday, February 2, 2013

Menampilkan Google Maps Android API v2 Pada Project

Hi Guys, Sudah pada belajar Google Maps Android belum? Bagi yang sudah, pasti sudah tau prosedur untuk menampilkan google map (peta) di android pada project kita. Bagi yang belum, mungkin bisa mencoba tutorialnya kang Agus yang sangat simpel dan mudah dimengerti.


Seperti yang kita ketahui bersama, untuk menampilkan GMaps (Google Maps) pada aplikasi, kita membutuhkan sebuah API key. Api key merupakan sebuah string yang digunakan sebagai otentikasi project untuk menampilkan GMaps pada project aplikasi. Untuk mendapatkan API key ini, dilakukan generate dari file debug-keystore yang terdapat pada folder .android di komputer/laptop kita. Oh ya, API key yang selama ini digunakan kemungkinan besar masih API versi satu (API v1). Dan ternyata, Google Maps Android API v1 ini, sekarang dalam status Deprecated alias Usang, karena Google ternyata telah mengupgrade GMaps nya dengan API v2.

Oh ya, v1 dari Google Maps Android API secara resmi ditinggalkan pada 3 Desember 2012. Pada tanggal 3 Maret 2013, kita sudah tidak dapat lagi untuk generate/meminta API key untuk versi ini. Tetapi jangan khawatir, karena aplikasi masih akan bekerja dengan semestinya. Hanya saja tidak adanya fitur baru akan ditambahkan ke Google Maps API v1 Android. Pengembang Google Maps Android sepertinya di dorong untuk Google Maps Android API v2.

Keunggulan Google Maps Android API v2 :

1) Desain interface (antarmuka) lebih dinamis dan fleksibel untuk perangkat layar besar Android, seperti tablet yang menggunakan Fragmen Android. Jadi, sekarang tidak perlu memiliki memperpanjang MapActivity jika menggunakan fragmen.
2) Menggunakan peta 3D.
3) Peta dapat diputar disegala arah sesuai yang diinginkan.
4) Jika diamati baik-baik, zooming untuk API v1 sangat over. Untuk API v2 ini, zooming sangat baik karena telah dioptimalkan.



Membuat sebuah aplikasi Android baru yang menggunakan Google Maps Android API v2 memerlukan beberapa langkah. Banyak langkah-langkah yang diuraikan dalam postingan ini hanya perlu dilakukan sekali, tapi beberapa informasi akan menjadi referensi yang berguna untuk aplikasi yang akan terus dikembangkan. Catatan: Aplikasi tidak akan berjalan di Emulator karena dibutuhkan Google Play Service yang hanya ditemukan pada hape Android kita. Disini, pengembang "dipaksa" untuk memiliki hape Android. Pastikan kita memiliki hape Android dengan versi 2.2 keatas.

1. Konfigurasi Google Play Service di Android SDK

Saya berasumsi bahwa kita menggunakan Eclipse untuk editor membuat aplikasi pada Android. Pastikan Gogole Play Service telah terdownload. Silahkan masuk ke Eclipse, buka menu Window -> Android SDK Manager dan pastikan status pada Google Play Services sudah Installed. Jika belum atau status dalam keadaan Not Installed, silahkan centang Google Play Services dan klik Install.


Setelah terinstall, ikuti langkah berikut ini :

a. Bukalah direktori tempat disimpannya Android SDK. Saya asumsikan diinstall di posisi default, yaitu C:\Program Files\Android\android-sdk. Kemudian silahkan masuk pada path C:\Program Files\Android\android-sdk\extras\google dan pastikan didalam path tersebut, ada folder google_play_services.

b. Silahkan jalankan Eclipse, klik File -> Import -> Android -> Existing Android Code Into Workspace -> Next. Kemudian pilih Browse dan pilihlah folder google_play_services yang terdapat pada path C:\Program Files\Android\android-sdk\extras\google Kemudian klik Finish. Pastikan google-play-services_lib sudah terdaftar di Package Explorer kita.

c. Silahkan membuat project GMaps v2 kita. Klik File -> New -> Android Application Project. Silahkan project android seperti biasa. Pastikan Build SDK nya pilih Google APIs. Pada contoh kali ini, saya membuat project dengan isian sebagai berikut :


d. Pada Package Explorer kita, sudah memiliki dua project, yaitu google-play-services_lib dan GMapsv2. Sekarang, klik kanan project kita (dalam hal ini GMapsv2) pilih Properties -> Android -> Add -> google-play-services_lib. Untuk lebih jelas lihat gambar berikut :


e. Klik OK dan pastikan google-play-services_lib sudah terdaftar di library. Klik Apply lalu Klik OK

2. Mendapatkan Layanan dan API key pada Google Maps Android API v2 

Satu hal yang mesti diketahui, bahwa API key pada v1 tidak sesuai dengan API key pada v2. Untuk menggunakan layanan GMaps v2, maka kita diwajibkan mendaftarkan project kita pada Google APIs Console.  

Mendapatkan nilai SHA1 pada android-debugkey 

a. Masuk ke CMD lalu masuklah pada direktori bin pada JDK anda. Disini saya menggunakan JDK versi 7. Sehingga saya mengetik : cd C:\Program Files\Java\jre7\bin lalu enter.

b. Ketiklah keytool.exe -list -v -alias androiddebugkey -keystore "C:\Users\ariefspekta\.android\debug.keystore" -storepass android -keypass android lalu enter. Pehatikan tulisan ariefspekta. Ganti ariefspekta sesuai dengan nama user di komputer/laptop yang kita gunakan. Disini saya menggunakan Windows 8 dan berlaku juga untuk versi windows dibawahnya.

c. Anda akan mendapatkan nilai SHA1 sesuai gambar dibawah ini :


Mendapatkan API Key

a. Masuk pada link Google APIs Console. Pastikan kita telah login menggunakan Google Account kita,

b. Klik Service yang terletak di menu sebelah kanan dan hidupkan Google Maps Android API v2 dengan cara klik tulisan OFF sehingga tulisan menjadi ON (lihat gambar berikut :)


c. Klik API Access yang terletak di menu sebelah kanan dan klik button Create new Android Key... (lihat gamba) kemudian masukkan nilai SHA1 yang sebelumnya telah kita dapatkan lalu ketik tanda titik koma (;) kemudian masukkan nama project yang telah kita buat tadi. Dalam hal ini nilai SHA1 yang saya dapatkan yaitu : F9:67:87:4E:A9:1D:DE:15:0F:47:F3:48:31:0A:D0:98:0A:4D:DE:4C dan project saya bernama com.ariefspekta.gmapsv2, sehingga saya mengisi dengan isian sebagai berikut :  

F9:67:87:4E:A9:1D:DE:15:0F:47:F3:48:31:0A:D0:98:0A:4D:DE:4C;com.ariefspekta.gmapsv2 Setelah itu klik CREATE (lihat gambar).


d. Selamat, anda telah mendapatkan API key v2


3. Modifikasi Coding dan Menampilkan Map 

a. Modifikasi AndroidManifest.xml Masukkan kode berikut diatas kode <application...

<permission
    android:name="com.ariefspekta.gmapsv2.permission.MAPS_RECEIVE"
    android:protectionLevel="signature"/>

<uses-permission android:name="com.ariefspekta.gmapsv2.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"/>
<uses-feature
    android:glEsVersion="0x00020000"
    android:required="true"/>

dan kode berikut sebelum kode </application>

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

Sehingga kode AndroidManifest.xml lengkap sebagai berikut :

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.ariefspekta.gmapsv2"
    android:versionCode="1"
    android:versionName="1.0" >

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

    <permission
        android:name="com.ariefspekta.gmapsv2.permission.MAPS_RECEIVE"
        android:protectionLevel="signature" />

    <uses-permission android:name="com.ariefspekta.gmapsv2.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" />

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

    <application
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <activity
            android:name=".MainActivity"
            android:label="@string/title_activity_main" >
            <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="AIzaSyA-K2tQEZ3zUfCY7pOth88EWh9y1A9P2ec" />
    
    </application>

</manifest>

Catatan penting :
- Gantilah com.ariefspekta.gmapsv2 dengan nama package anda.
- Gantilah API_KEY_ANDA dengan API key yang anda dapatkan tadi.

2. Edit file layout, dalam hal ini nama layoutnya : activity_main.xml. Tambahkan kode berikut di dalam RelativeLayout

<fragment xmlns:android="http://schemas.android.com/apk/res/android"
    android:id="@+id/map"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    class="com.google.android.gms.maps.SupportMapFragment"/>


Sehingga akan menjadi seperti ini :
<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" >

    <fragment xmlns:android="http://schemas.android.com/apk/res/android"
        android:id="@+id/map"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        class="com.google.android.gms.maps.SupportMapFragment"/>
    
</RelativeLayout>

3. Terakhir, edit MainActivity.java nya. Cukup dengan mengganti Activity menjadi FragmentActivity sehingga menjadi seperti berikut :

package com.ariefspekta.gmapsv2;

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;

public class MainActivity extends FragmentActivity {

    @Override
    public void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
    }

}


4. Terakhir, silahkan Run project anda. Pastikan hape Android anda sudah terhubung ke komputer/laptop dengan mode USB Debugging.



Catatan : Beberapa device/hape bermasalah dengan Google Play Service, dikarenakan ROM Android yang digunakan adalah hasil dari modifikasi (CUSROM) yang mengakibatkan tidak Google Play Service tidak dapat diinstall. Untuk mengatasi masalah ini, saya masih mencari solusinya. Mudah-mudahan cepat ditemukan dan masalah ini tidak menjadi kendala lagi untuk membuat Google Maps v2.

Salam androidspekta! 

Referensi :
http://mobisys.in/blog/2012/12/google-rolls-out-android-maps-api-v2/
http://wptrafficanalyzer.in/blog/google-maps-in-android-application-with-new-google-maps-android-api-v2-using-supportmapfragment/

17 comments:

  1. mas saya telah mencoba namun tidak dapat berjalan di handphone saya dikarenakan error pada logcat. saya menggunakan hp samsung galaxy y. mohon bantuan nya. terimakasih.

    ReplyDelete
    Replies
    1. Bisa tampilkan pesan error pada logcatnya? Terima kasih sudah berkunjung

      Delete
  2. mas...masalah yang sama..ketika project di run..., map tidak muncul..,yang ada pesan {get google service}..

    ReplyDelete
  3. pesan error "Unexpected namespace prefix "xmlns" found for tag fragment"
    pada baris <fragment xmlns:android="http://schemas.android.com/apk/res/android"

    gimana nih ...???

    ReplyDelete
    Replies
    1. punya aku errornya disitu juga..
      udah dapt solusinya gak??

      tolong share caranya.. :)

      Delete
    2. Caranya hapus line ini --> xmlns:android="http://schemas.android.com/apk/res/android"
      baris bawah naikkan. jadinya:


      Delete
  4. cara mendapatkan Google Service ::

    https://play.google.com/store/apps/details?id=com.google.android.gms&rdid=com.google.android.gms&rdot=1

    ReplyDelete
  5. sudah bisa, tp run di emulator jd force close ??

    help

    ReplyDelete
  6. lah, ente cuma kopas doang tapi belum pernah nyoba buat di gadget sendiri. btw tq

    ReplyDelete
    Replies
    1. kalo hasil kompile dari eclipse langsung emang gabisa jalan kah?

      Delete
  7. gan sory ni sebelumnya, certificat fingerprint di cmd ko ko ga kedetak ya? tulisannya "keystore does not exits" itu gmn masalhnya gan?
    tq sebelumnya

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

    ane pakek yang v2 gan kanapa itu?? mohon bantuanya..

    ReplyDelete
  9. error dibaris uses sdk,muncul tulisan :
    Not targeting the latest versions of Android; compatibility modes apply. Consider testing and updating this version. Consult the
    android.os.Build.VERSION_CODES javadoc for details.

    help me please.. thanks

    ReplyDelete
  10. punyaku errornya setiap xml ada fragment mesti error gmn mas ??

    ReplyDelete
  11. mas
    itu kodingannya eror di eclipse/..apa yg salah?

    ReplyDelete
    Replies
    1. <fragment xmlns:android="http://schemas.android.com/apk/res/android"

      Delete
  12. Mantap betul gaaan artikel nya perihal menampilkan google maps Android API v2 pada project. Salam kenal ya saya Monalisa dari ISB Atma Luhur

    ReplyDelete