Rabu, 27 Maret 2013

Membuat Aplikasi Peta Android dengan Google Map V2

Fiuhh akhirnya jadi bisa mencoba membuat Aplikasi Peta dengan Google Map V2. Cukup panjang prosesnya. Katanya sih Google Map Android yang versi 1 akan dishutdown tahun ini, artinya semua aplikasi android yang menggunakan Google Map versi sebelumnya Petanya tidak akan muncul bahkan mungkin aplikasinya akan mati tidak bisa dijalankan :( apa iya, kayaknya Google tidak akan berani secepat itu menghentikan layanan, seperti halnya Google Map Web Versi 2 juga sudah lama sejak kemunculan Google Map versi 3 belum juga dihentikan. Kalau Google tetap nekat bisa-bisa ribuan aplikasi di Google Play mati semua hehe.

Pertama-tama buka Android SDK Manager, pastikan anda sudah menginstall Google APIs, kelihatannya yang pasti mendukung Google Map Android V2 adalah Google APIs versi 17. Penulis belum pernah coba versi di bawahnya.


Kemudian pastikan juga sudah menginstall Google Play Services




Kemudian buka Eclipse, buka Window-Preferences-Android-Debug, lihat dahulu lokasi file debug.keystore.


Kemudian buka Command Prompt, kita generate Google API Key dari debug.keystore menggunakan keytool bawaan JDK, caranya ketikkan perintah berikut :


> cd "C:\Program Files\Java\jdk1.7.0_02\bin"\

> keytool.exe -list -v -keystore "C:\Users\PC\.android\debug.keystore" -alias androiddebugkey -storepass android -keypass android


Kemudian copy Key SHA1. Setelah itu kita buka Google API Console di URL https://code.google.com/apis/console, klik Services, aktifkan Google Maps Android API v2



Kemudian klik API Access, klik Android Key, masukkan Key SHA1 yang telah didapatkan diikuti tanda ; dan diikuti nama namespace package, misalnya :

59:56:X8:A0:2C:12:XA:1D:52:0F:3C:XB:41:A6:C7:35:FA:95:1E:E5;com.amijaya.googlemapv2


Klik Create, hasilnya didapatkan Key untuk Project tersebut. Copy API Key-nya.


Kemudian pada Eclipse kita Import dahulu Project Library bawaan SDK Google Play Services, Klik File Import, pilih Android-Existing Android Code Into Workspace :


Kemudian pilih direktori <Android SDK>/extras/google/google_play_services/libproject/google_play_services_lib.
Klik OK, hasilnya akan dimasukkan Project baru bertipe library bernama google_play_services_lib. Project ini akan kita include kan di Project Utama kita.


Kemudian buat Project Utama, klik File-New-Android Project. Jangan lupa memilih Compile With Google APIs.


Setelah Project baru selesai dibuat Klik kanan Project - Properties - Android, klik Add untuk menambahkan Project Library google_play_services_lib :


Kemudian pada activity_main.xml buat tampilan 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"
    tools:context=".MainActivity" >
    <fragment
        android:id="@+id/map"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        class="com.google.android.gms.maps.SupportMapFragment"
        />
</RelativeLayout>


Kemudian pada MainActivity.java kita ketikkan program berikut :


package com.amijaya.googlemapv2;

import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.SupportMapFragment;
import com.google.android.gms.maps.model.BitmapDescriptorFactory;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.MarkerOptions;

import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.support.v4.app.FragmentManager;
import android.view.Menu;

//http://cariprogram.blogspot.com
//nuramijaya@gmail.com

public class MainActivity extends FragmentActivity {
final int RQS_GooglePlayServices = 1;
private GoogleMap myMap;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);
        FragmentManager myFragmentManager = getSupportFragmentManager();
        SupportMapFragment mySupportMapFragment = (SupportMapFragment)myFragmentManager.findFragmentById(R.id.map);
        myMap = mySupportMapFragment.getMap();
        
        LatLng jogja = new LatLng(-7.782939, 110.367050);
        MarkerOptions markerJogja = new MarkerOptions();
        markerJogja.position(jogja);
        markerJogja.title("Tugu Yogyakarta");
        markerJogja.snippet("Tugu Pusat Kota Yogyakarta");
        markerJogja.icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_GREEN));
        
        myMap.setMapType(GoogleMap.MAP_TYPE_NORMAL);
        myMap.addMarker(markerJogja);
        
        myMap.getUiSettings().setCompassEnabled(true);
        
        myMap.getUiSettings().setZoomControlsEnabled(true);
        
        myMap.animateCamera(CameraUpdateFactory.newLatLngZoom(jogja, 15));
    }

    @Override
    public boolean onCreateOptionsMenu(Menu menu) {
        // Inflate the menu; this adds items to the action bar if it is present.
        getMenuInflater().inflate(R.menu.activity_main, menu);
        return true;
    }
    
}


Terakhir pada AndroidManifest.xml tambahkan permission, setting dan API Key yang telah didapatkan tadi sehingga seperti ini :


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

    <uses-sdk
        android:minSdkVersion="8"
        android:targetSdkVersion="16" />
    
    <permission
        android:name="com.amijaya.googlemapv2.permission.MAPS_RECEIVE"
        android:protectionLevel="signature" />
        
    <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:allowBackup="true"
        android:icon="@drawable/ic_launcher"
        android:label="@string/app_name"
        android:theme="@style/AppTheme" >
        <meta-data android:name="com.google.android.maps.v2.API_KEY" android:value="<GANTI-DGN-ANDROID-API-KEY>" />
        <activity
            android:name="com.amijaya.googlemapv2.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>
    </application>

</manifest>


Hasilnya :


Project selengkapnya silakan didownload disini, di Google Drive, klik File - Download.

Semoga menyenangkan :)

45 komentar:

  1. aduh panjang bener nih tutorial, di komentarin dulu ah sebelum baca

    BalasHapus
  2. wah makasih niy...

    bantu bgt projek skripsi ane gan...

    thanks - thanks

    BalasHapus
  3. kok disaya eror R nya yah mas, sudah di clean padahal. dan di style.xml pada value-v11 dan v-14

    BalasHapus
    Balasan
    1. Setahu saya itu karena Ecplise, ADT atau SDK Androidnya versi lama Mas.
      Saran saya download yang paling baru di http://developer.android.com/tools/sdk/eclipse-adt.html. Kemudian buka Eclipse barunya Window-Android SDK Manager(dalam keadaan terkoneksi internet), install GoogleAPI (sebaiknya versi 17) dan Google Play Services.
      Baru ikuti langkah di atas. Semoga berhasil..

      Hapus
    2. @Muhammad Arief : Boleh tau android sdk tools nya versi berapa....
      kalu pakai yg versi 2.2 itu mesti di update lgi coz ada tools yg belum ke install

      Hapus
    3. Wah maaf sekali saya salah memberi link.
      Coba buka saja link berikut ini kemudian Download ADT Bundle for Windows.
      http://developer.android.com/sdk/index.html
      Sudah lengkap tinggal diextract, tidak perlu install, kemudian diupdate GoogleAPI dan Google Play Services.
      Untuk Eclipse lama saya tidak menyarankan untuk update karena bisa malah rusak.
      Saran saya backup Eclipse anda yang lama, karena itu istilah saya barang langka dan unik. Belum tentu bisa anda dapatkan lagi Eclipse, SDK dan ADT versi lama. Jangan diupdate, nanti malah error.

      Hapus
  4. import com.google.android.gms.maps.CameraUpdateFactory;

    dapat library GMS dari mana yah?? kok tempat saya gak ada


    terima kasih

    BalasHapus
    Balasan
    1. Coba diupdate dahulu Android SDK nya, pastikan ada Google API (sebaiknya yang versi 17) dan Google Play Services (ada di bagian paling bawah) di window Android SDK Manager folder Extras.
      Klik Window-Android SDK Manager (dalam keadaan terkoneksi ke internet).
      Jangan lupa langkah untuk mengimport dahulu Project Library bawaan SDK Google Play Services seperti diterangkan di atas.

      Hapus
    2. mau nanya mas saya kan pake eclipse juno ters saya cek google play service nya ga ada terus goole apinya juga masih versi 10 gmn dong solusinya trimakasih

      Hapus
  5. sewaktu memasukkan Key SHA1 yang telah didapatkan diikuti tanda ; dan diikuti nama namespace package, gagal ada caption "YOUR INPUT WAS INVALID" kira kira penyebabnya apa ya gan ?

    BalasHapus
  6. Wah sulit diperkirakan kesalahannya dimana, mungkin kesalahan di penulisan Command DOS nya :
    > keytool.exe -list -v -keystore "C:\Users\PC\.android\debug.keystore" -alias androiddebugkey -storepass android -keypass android
    atau library Android SDK nya kurang baru (Google API sebaiknya versi 17) dan Terinstall Google Play Services. Langkahnya coba cek komentar di atas.
    Atau salah dalam mengcopy pastikan SHA1 dan tidak ada yang tertinggal.

    BalasHapus
  7. Maaf sekali, saya salah memberi link.
    Untuk Download ADT Bundle for Windows silakan buka link di bawah ini :
    http://developer.android.com/sdk/index.html
    Sudah lengkap tinggal diextract, tidak perlu install, kemudian tinggal diupdate GoogleAPI dan Google Play Services.
    Saran saya jangan update Eclipse dan SDK anda yang lama, pengalaman saya malah error dan tidak bisa dipakai lagi.

    BalasHapus
  8. import com.google.android.gms.maps.CameraUpdateFactory;
    import com.google.android.gms.maps.GoogleMap;
    import com.google.android.gms.maps.SupportMapFragment;
    import com.google.android.gms.maps.model.BitmapDescriptorFactory;
    import com.google.android.gms.maps.model.LatLng;
    import com.google.android.gms.maps.model.MarkerOptions;

    itu semua error kenapa error ya?
    saya sudah lakukan smua tutor yang diatas,tapi malah pada saat diketik ulang jadi error smua? mhon pecerahannya :)

    BalasHapus
    Balasan
    1. Sepertinya ada dua kemungkinan:
      1. Saat membuat Project baru lupa memilih Compile With : Google APIs, coba search artikel ini pada kata "Kemudian buat Project Utama, klik File-New-Android Project. Jangan lupa memilih Compile With Google APIs."
      2. Atau belum mengimport Library bawaan SDK Google Play Services dan Memasukkannya ke dalam project, coba search artikel ini pada kata "Kemudian pada Eclipse kita Import dahulu Project Library bawaan SDK Google Play Services" dan "Klik kanan Project - Properties - Android, klik Add untuk menambahkan Project Library google_play_services_lib"

      Hapus
    2. saya sudah import mba google_play services_libnya tapi tetap error di import gms.maps nya... pas di import memang di bisa dengan tnda cecklist hijau tapi setelah di apply google_play nya jadi silang merah lagi mba.. itu gmn ya? mhn pencerahannya :)

      Hapus
  9. Parser exception for /googlemapv2/AndroidManifest.xml: The processing instruction target matching "[xX][mM][lL]" is not allowed.

    itu semua error kenapa error ya?
    saya sudah lakukan smua tutor yang diatas,tapi malah pada saat diketik ulang jadi error? mhon pecerahannya :)

    terima kasih

    BalasHapus
    Balasan
    1. Saya malah belum pernah mengalami error seperti itu. Mungkin bisa diambil saja dari Source Code project yang bisa diwonload di bagian bawah artikel. Kemungkinan hanya salah copy paste, atau salah ketik saja.

      Hapus
  10. mas kalo google maps_nya g' tampil saat di run pada emulator android,penyebabnya pa ya?
    soalnya saya sudah coba coding di atas dan g' ada pemberitahuan error,waktu sya run as map_nya g' muncul.

    minta pencerahannya mas :)

    BalasHapus
    Balasan
    1. GoogleMap v2 Android memeang tidak bisa dijalankan di Emulator Mas. Pasti error.
      Jadi harus dijalankan di Handphone atau Tablet (device beneran).
      Ada beberapa artikel yang mengatakan bisa menjalankan GoogleMap v2 di Emulator asal sudah diinstall GooglePlay Service secara manual. Tapi maaf saya belum sempat nyoba ^_^
      Coba silahkan cek http://www.google.com/search?q=android+run+googlemap+on+emulator+install+googleplay.
      Semoga berhasil.

      Hapus
  11. mas saya mau nanya,bagaimana cara menampilkan lebih dari satu marker pada google map?
    dimana koordinat untuk lokasi-lokasinya sudah tersimpan di database mysql.

    bsa bantu kodingnya g' mas..terima kasih ^_^

    BalasHapus
    Balasan
    1. Ini cukup panjang mas, coba cek dahulu artikel http://cariprogram.blogspot.com/2013/01/android-json-data-web-database-php-mysql.html.
      Pertama buat dahulu tabel di database mysql berisi nama lokasi beserta latiitude longitudenya, kemudian buat file PHP yang mengambil data dari mysql dan menampilkan dalam bentuk JSON :
      <?php
      mysql_connect('localhost', 'root', '');
      mysql_select_db('db');
      $result = mysql_query("SELECT * FROM kota");
      $rows = array();
      while ($r = mysql_fetch_assoc($result)) {
      $rows[] = $r;
      }
      $data = "{kota:".json_encode($rows)."}";
      echo $data;
      ?>
      Kemudian pada project Android seperti pada artikel ini, tambahkan di coding di bawah baris ini :
      ...
      myMap.addMarker(markerJogja);

      try {
      jsonResult = getRequest("http://10.0.2.2/datakota.php");
      jObject = new JSONObject(jsonResult);
      JSONArray menuitemArray = jObject.getJSONArray("kota");
      for (int i = 0; i < menuitemArray.length(); i++)
      {
      LatLng titik = new LatLng(Double.parseDouble(menuitemArray.getJSONObject(i).getString("latitude").toString()), Double.parseDouble(menuitemArray.getJSONObject(i).getString("longitude").toString()));
      MarkerOptions markerTitik = new MarkerOptions();
      markerTitik.position(titik);
      markerTitik.title(menuitemArray.getJSONObject(i).getString("nama").toString());
      markerTitik.snippet(menuitemArray.getJSONObject(i).getString("deskripsi").toString());
      markerTitik.icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_BLUE));
      myMap.addMarker(markerTitik);
      }
      } catch (JSONException e) {
      e.printStackTrace();
      }
      ...
      Panjang sekali, semoga berhasil ^_^

      Hapus
    2. mas setelah sya coba,mash da keslahan di bagian getRequest?
      minta pencerahaannya gan ^_^

      Hapus
    3. Fungsi getRequest() nya ada di artikel ini mas, http://cariprogram.blogspot.com/2013/01/android-json-data-web-database-php-mysql.html.
      Coba download source codenya yang artikel tersebut. kemudian copy-paste isi fungsi getRequest(), di dalam activity di project Peta-nya..

      Hapus
    4. ko tetep gagal ya mas?
      program ga ada yang salah tapi lokasi-lokasi yang ada pada database tidak muncul
      mohon pencerahan gan, Please :(

      Hapus
  12. mas mau tanya cara agar ketika dituliskan 1 huruf maka muncul saran kota mana yang akan dipilih bagaimana??

    BalasHapus
    Balasan
    1. Wah saya tidak yakin jawaban ini sesuai yang mas inginkan, menurut saya mas bisa memakai AutoCompleteTextView seperti pada artikel ini :
      http://cariprogram.blogspot.com/2013/06/membuat-aplikasi-autocompletetextview-pada-android.html.

      Hapus
  13. R nya masih error kenapa mas?

    BalasHapus
    Balasan
    1. Kalau file R, biasanya yang bermasalah Eclipse-nya mas. Bisa karena Eclipse nya tidak sama versinya (lebih lama). Atau Eclipse sedang error. Kalau Eclipse lama walaupun diupdate gak akan ngejar yang versi baru. Jadi saran saya download SDK Android dari http://developer.android.com/sdk/index.html yang terbaru, sudah sama ADT Eclipse-nya, kemudian update SDK nya..

      Hapus
  14. gan kok peta ga mau tampil di device ya? padahal udah aku aktifin semua export signed aplication packages juga udah. mohon pencerahannya

    BalasHapus
    Balasan
    1. Asal tidak ada error, kemudian dapat dijalankan di device tetapi peta tidak keluar, memang masalahnya kalau tidak di Key nya ya di devicenya. Pertama coba dahulu di device lain (misal milik teman) bisa tidak. Klo bisa berarti device-nya belum update Google Play Servicenya.

      Tetapi kalau bisa, berarti Keynya salah, bisa salah ketik, atau salah copy, silakan dicoba untuk mendapatkan Key lagi dari Google.

      Semoga berhasil..

      Hapus
  15. maap mas mau nanya, saya sudah copy semua coding ke eclipse saya. kok masih ada error yah.. "marker id 1 not found" gitu di error log-nya. itu kenapa? terima kasih sebelumnya

    BalasHapus
    Balasan
    1. Kalau memang sudah betul hanya gara-gara marker, bisa dihapus saja baris ini :

      MarkerOptions markerJogja = new MarkerOptions();
      markerJogja.position(jogja);
      markerJogja.title("Tugu Yogyakarta");
      markerJogja.snippet("Tugu Pusat Kota Yogyakarta");
      markerJogja.icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_GREEN));

      myMap.addMarker(markerJogja);

      Harusnya setelah dihapus baris tersebut aplikasi bisa jalan, bisa keluar peta, tetapi tidak keluar marker. Jika aplikasi tidak jalan juga berarti yang salah bukan markernya.

      Saran saya download saja source code dari artikel ini mbak. Kemudian minta dapatkan SHA1 dari debug.keystore komputer anda. Cari Google Key untuk sha1;com.amijaya.googlemapv2, kemudian ganti AndroidManifest.xml dengan key yang didapatkan, harusnya bisa..

      Jika masih tidak bisa, mungkin Eclipse atau Komputer Mbak yang bermasalah..

      Hapus
  16. kenapa saat Run pasti kesalahan nya yg keluar di virtualnya "Unfortunately ... Has Stoped"
    itu kenapa yah..?
    mohon pencerahannya, Terima Kasih

    BalasHapus
    Balasan
    1. Kalau langsung Unfortunately.. biasanya ada di file2 XML. Misal pada AndroidManifest.xml kurang diberi permission INTERNET, atau Google Map Key ditolak, atau ada id object di layout xml ada yang sama. Dan seterusnya.., memang cukup berat debugging di Android, coba lihat log cat..

      Hapus
  17. mas, kalo ini error nya kenapa ya ? ---> https://www.facebook.com/photo.php?fbid=10200766850071258&set=a.10200233861186869.1073741825.1162775419&type=3&theater

    BalasHapus
  18. mas kalo ganti peta jogja jadi peta bogor gimana ih ?
    longitude sama latitude udah diganti tapi tetep gak bisa :(

    BalasHapus
  19. Mas kalo mau menampilkan lebih dari 1 marker tapi tanpa databse,semuanya pakai coding gmana mas?

    BalasHapus
  20. mba, kalo compilenya bukan pake Google Apis bisa nggak? apa emang harus pake google APis untuk aplikasi google map?

    BalasHapus
  21. makasih mas tutorialnya sangat membantu, oh ya mas klo misalnya saya mau menampilkan marker tersebut pada tombol bagaimana ya mas? untuk lat dan lng nya di ambil dari sqlite gitu.. makasih :D

    BalasHapus
  22. Itu bisa ditambahin dengan potonya engga kalo kita lagi ada di suatu tempat

    BalasHapus
  23. cara mencari titik koordinat batas wilayah suatu desa apa sama seperti ini codingnya??

    BalasHapus
  24. bagus gan tutorialnya.
    saya menggunakan eclipse mars.
    tapi selalu tidak bisa untuk mer-run aplikasinya.
    mohon pencerahannya.
    eclipse saya selalu error.
    ini menggunakan eclipse apa ya gan ?

    BalasHapus
  25. itu dalam projek ada folder google-play-services_lib, bagaimana cara menyatukannya gan ?
    saya mengikuti tutorial diatas tapi tidak ada folder tsb.

    BalasHapus