Belajar Android – Pengenalan Google Map

Jumpa lagi dengan Agus Haryanto diseri tutorial Android, Pada tutorial sebelumnya kita telah mempelajari tentang Mendapatkan koordinat dari GPS. Nah koordinat itu tidak akan berarti lebih apabila tidak kita tampilkan dalam MAP.  Untuk Android Map yang dipakai biasanya adalah Google MAP.

Agar Emulator kita dapat menampilkan MAP Google MAP ada beberapa hal yang harus dilakukan (saya ambi dari http://mobiforge.com/developing/story/using-google-maps-android) :

  1. pada Android SDK harus sudah terinstall Google APIs by Google Inc, Android API 8

2. Masih dari Android SDK, buat Android Virtual Device baru untuk yang kana digunakan untuk emulator yang memnggunakan Fitur Google API. Caranya, klik Virtual Device, lalu klik tombol New akan muncul jendela  “Create New Android Virtual Device”  Isikan seperti gambar dibawah, lalu klik Create AVD

3. Untuk memanfaat kan fitur Google Map ini, kita memerlukan Map API Key, tanpa ini kita tidak akan dapat menampilkan MAP di Android. Bagian inilah yang sering dilupakan, sehingga banyak yang bingung, mendapatkan Map nya tidak tampil.

4. Kalau anda pakai Windows XP cari file debug.keystore. , biasanya terletak di directory C:\Documents and Settings\<username>\Local Settings\Application Data\Android

5. Copykan file debug.keystore ke directory c:\android

6. Kita buat MD5 FingerPrint dengan menggunakan command keytool.exe yang ada pada java SDK, biasanya terletak di “C:\Program Files\Java\<JDK_version_number>\bin”

7. Dari command promt masuk kedirectory tesebut lalu jalankan ketikkan 
“keytool.exe -list -alias androiddebugkey -keystore "C:\android\debug.keystore" -storepass android -keypass android” 
lalu tekan enter


8. MD5 FingerPrint ini kana digunakan untuk membuat Key Goggle Map. 
Sekarang kita buka browser masuk ke “https://developers.google.com/maps/documentation/android/v1/maps-api-signup” 
ikuti petunjuk yang ada.
9. Selamat anda telah sukses mendapatkan Key Google Map. Simpanlah key ini. 
Jangan sampai hilang, karena akan kita pakai untuk develop menggunankan Google Map dian droid.

Panjangyah langkah-langkahnya, ayo terus semangat
Persiapan Sudah selesai, sekarang kita masuk ke pembuatan Aplikasinya, berikut langkah langkahnya.
1.    Seperti biasa, buat New Android Project


2. Pada saat project pertama kali dibuat ada 3 file penting yang langsung dibuat, yaitu

  • main.xml
  • string.xml
  • TampilkanMap.java
3. Edit file main.xml, ketikkan kode seperti dibawah ini
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent">

    <com.google.android.maps.MapView
        android:id="@+id/mapView"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:enabled="true"
        android:clickable="true"
        android:apiKey="isi dengan key Google Map API"
        />

</RelativeLayout>

Disini untuk menampilkan MAPnya kita menggunakan tag com.google.android.maps.MapView sedangkan untuk Layoutnya adalah RelativeLayout
Untuk android:apiKey, isi dengan key Google Map yang telah kita buat tadi

4. Untuk dapat melakukan menampilan Map Google Map kita perlu menambahkan <uses-library> com.google.android.maps dan <uses-permission> INTERNET nya melalui file AndroidManifest.xml , buka file AndroidManifest.xml lalu ketikkan seperti kode berikut

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
	package="com.agus" android:versionCode="1" android:versionName="1.0">
	<application android:icon="@drawable/icon" android:label="@string/app_name">
		<uses-library android:name="com.google.android.maps" />
		<activity android:name=".TampilkanMap" 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>
	<uses-sdk android:minSdkVersion="8" />
	<uses-permission android:name="android.permission.INTERNET"></uses-permission>
</manifest>

5. Edit file TampilkanMap.java dan ketikkan kode dibawah ini

package com.agus;

import com.google.android.maps.MapActivity;
import com.google.android.maps.MapView;
import android.os.Bundle;

public class TampilkanMap extends MapActivity
{
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);
    }

    @Override
    protected boolean isRouteDisplayed() {
        return false;
    }
}

Pada kode diatas class TampilkanMap meng extends class MapActivity, agar class ini dapat menampilkan map.

7. Sekarang mari kita coba run Project BelajarGoogleMap, maka hasilnya akan seperti ini

8. Horee, We can do that J, Alhamdulillah akhirnya MAPnya tampil.
9. Map diatas rasanya masih kurang karena belum ada tombol (navigasi) untuk pengaturan zoom viewnya.
Untuk itu tambahkan kode berikut pada baris terakhir method onCreate

MapView mapView = (MapView) findViewById(R.id.mapView);
mapView.setBuiltInZoomControls(true);

Kalau kita run project kita sekarang, lalu kita klik salah satu bagian map, maka akan muncul zoom controlnya


10.  Kita dapat mengatur (map) peta mana yang ingin kita tampilkan dilayar caranya dengan menentukan koordianat latitude dan longitudenya. Untuk kodenya adalah

double lat = -6.2532592788520005;
double
lng = 106.853239291777;
GeoPoint point = new GeoPoint((int) (lat *1E6),(int) (lng * 1E6));
mapView.getController().animateTo(point);
mapView.getController().setZoom(15);

point adalah koordinat yang kita tentukan,
mapView.getController().animateTo(point);
akan membuat map yang ditampilkan adalah map yang koordinat dtitik tengahnya adalah point
mapView.getController().setZoom(15); akan menset zoom level map nya adalah 15

Sehingga kode lengkap dari TampilkanMap.java adalah


package com.agus;

import com.google.android.maps.GeoPoint;
import com.google.android.maps.MapActivity;
import com.google.android.maps.MapView;
import android.os.Bundle;

public class TampilkanMap extends MapActivity
{
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        MapView mapView = (MapView) findViewById(R.id.mapView);
        mapView.setBuiltInZoomControls(true);

        double lat = -6.2532592788520005;
        double lng = 106.853239291777;
        GeoPoint point = new GeoPoint((int) (lat *1E6),(int) (lng * 1E6));
        mapView.getController().animateTo(point);
        mapView.getController().setZoom(15);

    }

    @Override
    protected boolean isRouteDisplayed() {
        return false;
    }
}

sekarang mari kita run projectnya, maka tampilannya akan seperti ini

Sekarang yang muncul adalah peta jakarta, hal ini terjadi karena kita menset koordinat latitude dan langitudeny adalah salah satu titik lokasi dijakarta

Makin seru saja kan android, setelah berhasil dalam tutorial ini, tentunya kita makin semangat dan selanjutnya akan timbul pertanyaan bagaimana cara membuat marker dan infowindow pada google map di android.
Untuk tutoial marker dan info window insya Allah akan diposting pada tutorial selanjutnya.

Salam hangat
Agus Haryanto

146 comments to Belajar Android – Pengenalan Google Map

  • Nice gan.

    ane tunggu artikel selanjutnya

  • syadzili

    kok pny saya kota-kotak ya map na?
    mohon pencerahan 🙂
    terima kasih

  • Agus Haryanto

    @syadzili, coba cek Key Goggle Map nya. dan pastikan pada saat menjalankannya tetap terhubung dengan internet

  • gitoythea

    Pak kok saya muncul pesan seperti ini :
    Installation error: INSTALL_FAILED_MISSING_SHARED_LIBRARY
    Please check logcat output for more details.
    Launch canceled!
    Mohon Pencerahannya !

  • christina

    Pak..saya mengalami masalah yang sama dengan sdr syadzili..
    Langkah-langkah yang saya lakukan persis sama dengan tutorial yang Anda berikan.
    Tetapi maps saya masih tidak muncul.
    Mohon bantuannya..

  • Agus Haryanto

    pada file main.xml
    coba cek android:apiKey, isi dengan key Google Map yang telah dibuat (Apakah ini sudah dilakukan).
    Karena jika key google mapnya salah, maka mapnya hanya tampil kotak-kotak

  • Lia

    masalah saya sama seperti saudara syadzili dan christina, cuma muncul kotak2 gak muncul petanya. padahal apikeynya udah bener dan koneksi internet cepat !

  • Lia

    gimana cara pasang aplikasi android yang udah qta buat di Hp Android ?
    Trima kasih, Mohon Penjelasannya !

  • Agus Haryanto

    pada project yang ingin kita publish aplikasinya klik kanan lalu pilih android tool lalu pilih Export Signed Application Package

  • opik

    mas gimana kita cara dapetin kode lotitude sama langitude nya..?
    itu kan buat yg di jkt…
    klo saya mau set tempat saya sendiri dari mana saya tau tu kodenya,,

  • Pixel

    Untuk windows 7 gimana caranya nih…?

  • Agus Haryanto

    @pixel, maksudnya windows phone 7 ?

  • AdrianFikri

    @pixel search aj d explorenya pasti ada ko…

  • Map.. kalo saya bikin di Google Maps API 11 bisa kan?? saya newbe. klo key Google Map bisa sama kaya orang lain ga Mas?? Thx..

  • Nur

    kalo nyari key.debugger di windows 7 gimana caranya..??mohon pencerahannya.

  • MEB

    klw cari key.debugger di vista gimana ya mas?

  • toms

    mas klo di google APIs bisa buat menu nga ?? trus ntr menu itu tampilin petanya
    mohon pencerahannya mas..terimakasih 🙂

  • Agus Haryanto

    @toms, emang mau ada menu apa dipeta ?

  • toms

    menunya ada diawal mas, misalnya Peta, About, Exit…trus kalo diklik menu peta akan muncul gambar peta.

  • don

    Mas kalo cara bikin menu search tempat kya google map bawaan dari hp androidnya gmana ya??? thanks

  • mrhands

    mas tanya donk. low pengen nampilin data .shp ke android gmana donk??

    Apakah bisa juga pake SVG??

  • irham

    mas saya mau tanya , dibagian ini ko saya tidak bisa ya tulisan,a pada cmd itu failid terus

    buat MD5 FingerPrint dengan menggunakan command keytool.exe yang ada pada java SDK, biasanya terletak di “C:\Program Files\Java\\bin”

  • fenty

    mas pertanyaan toms jawab dong.. klo misalkan tampilan awal peta ada menu/ada button2 kira2 bsa ga??

  • bharep

    waahhh….
    makasih banget mas, source Google Map-nya memberi ide baru…
    Tapi boleh minta tolong bimbingannya tak???
    –> saya niat ingin membuat peta yang dapat dibatasi ruang gerak & level maksimal zoom outnya???
    –> atau bagaimana caranya membuat stored maps (Map Offline)???
    –> atau bagaimana caranya membuat jalur antar point (route)???

    Maaf mas kalo jadi banyak nanya mumpung lagi penasaran sama android…hHe

  • rika

    mas, kalo di windows 7 file debug.keystore. dimana ya??
    saya coba cari2 gak dapat mas 😀

  • ican

    @irham
    maap, coba membantu, cek nama foldernya lg coba “C:\Program Files\Java\\bin”
    cek lg cek lg

  • anyeh

    mas, pada saat run, mengalami force close,, salah dimana ya mas? terima kasih

  • @anyeh coba cek manifestnya.. udah ada blm permission buat internet sma use library goggle mapsnya

    mas,, saya coba install di android saya kok gak muncul yah gambarnya,
    padahal di emulator muncul gambarnya

  • udah solved mas…
    ternyata pas kita ngeksport file kan dia minta ngebuat file keystore..
    nah keystore itu yang kita hash.. trus kita dpetin kodenya

    nanti di cmd di ketik gni
    C:\Program Files\Java\jdk1.6.0_06\bin>keytool -list -alias 111111 -keystore “C:\asuw.keystore”
    sesuain nama keystorenya sama nama file yang tadi kita eksport, terus nama aliasnya juga sama..

    enter n bakalan muncul ini
    Enter keystore password:

    masukin password sesuai dengan yang kita eksport
    selanjutnya ikutin cara di atas buat dapetin keynya

  • anyeh

    @cung cruy,,, thx cung

  • kurnianto

    mas kok tetep g da petanya ya?
    pdhl apiKey dah di isi
    tp tetep g muncul petanya, cma kotak2
    minta pencerahan

  • ekarock26

    tutorialnya bagus mas…
    buat referensi skripsi…

    btw boleh tanya g caranya mbuat stored map tpi hanya 1 kabupaten saja…
    jadi jika user ingin mengetahui tempat yg dituju tanpa harus terhubung ke internet lgi…
    sehingga akses menjadi lebih cepat dan hemat..
    apalagi jika berda d tempat yg tidak ada sinyalna sehingga lebih mmbantu user…

    terima kasih mas
    mohon bantuana..

  • Yulia

    mas kalo debug.keystore di Windows 7 dimana ya ?
    ko disearch ga ada juga ..

  • juwita

    coba ngebantu yak,
    kalo peta yg muncul kotak2,kemungkinan besar APIKey-nya salah, coba deh kalian buat ulang APIKey-nya trus langsung di-copy code yang muncul di google-nya(untuk mengindari kesalahan Pengetikan).

  • jimmy

    thx cung

  • egiadtya

    mas..saya coba debug langsung ke device ..tp force close trus..knpa ya??mohon bantuannya,,

  • buat teman-teman yang tampilanya masih kotak-kotak padahal sudah memasukan APIkey dari google sudah benar, saya juga punya pengalaman yang sama, saya coba sharing disini:
    1. coba browser dari emulator teman-teman apakah bisa terkoneksi ke internet, coba akses google.com
    2. jika tidak bisa, mungkin teman-teman berada di belakang proxy, setting alamat proxy di emulator dan portnya, caranya:
    Menu-Setting-wireless&network-mobile network-acces point name- nama AP(klik aja)- Isi alamat Proxy dan Port nya;

    tips ini sudah saya coba dan berhasil, semoga tips ini bermanfaat;

    warm regards;

  • Maaf teman-teman ada satu langkah yang terlewati yaitu;

    eclipse-Run-Run Configuration – targer – di bagian addtional command ketik perintah :
    -http-proxy http://: -debug-proxy

    warm regards;

    Opik

  • wah,..akhirnya tampilannya muncul jg..!! hee….ternyata yg di copy ke android:api nya bukan yg MD5 nya,..tp harus di generate dulu yah di http://code.google.com/android/maps-api-signup.html

  • adi nugrahah

    kalo mengalami keystore nya nggak ada gimana pak? mohon pencerahan dong

  • mesyah

    Mas, ane udah ngikutin langkahnya dengan benar,
    tapi muncul proses has been stopped unexpectedly pleas try again,,

    maksudnya apa ya,,,?
    maaf newbie

  • adi nugraha

    berhasil pak, terimakasih tutorialnya 🙂

  • Agus Haryanto

    @adi, mantap, lanjutkan ketutorial lainnya terus semangat

  • tegam

    wah,,,tutorial yang ini berhasil lagi om Agus,,,jadi tambah smngat buat belajar android ni,,,mohon bantuannya om klo banyak nanya…
    btw klo mau cari langitute ama longitude daerah lain,misalnya Jogja,,gmn ya,soalnya saya udh searching google koq blm ktemu ya,,,thanks…

  • teddy

    mas kl nyari debug.keystore diwindow 7 di mna y kok g ada..
    mhon pencerahan nya..

  • Mas Agus,

    Ane dah buat file *.apk, trus diinstall di android ane, pas load ga muncul map-nya, cuma kotak2; FYI Wifi Active, ada saran?

  • ayusinthia

    mau tanya dunk
    saya buat aplikasi yang menampilkan map
    pada emulator mapnya muncul
    namun setelah saya import jadi .apk, dan install di androidnya…mapnya ga mau load petanya
    hanya terlihat spinner penunjuk tempat
    yang salah itu key apinya ato providernya?
    setau saya seharusnya key api antara yg d emulator ama di android itu sama soalnya android kan support google map?apa beda ya??
    mohon bantuannya
    soalnya ini untuk tugas akir

  • paulsenjs

    sebelumnya terima kasih mas agus buat tutorial nya,.
    tapi mas, saya ada pertanyaan..

    saya sudah berhasil menampilkan peta di emulator nya.. tapi kemudian saya coba install di device android, map nya tidak bisa ditampilin. Setelah saya baca2 referensi di internet, ternyata kita butuh API Key yang release. Nah, saya sudah coba langkah2 yang ada di http://developer.android.com/guide/publishing/app-signing.html. Tetapi blom bisa juga…

    mohon bantuannya mas, bagaimana caranya agar kita dapat API Key untuk release dan bisa jalan di device android.

    thx b4

  • alfredo

    terima kasih tutorial nya mas. cm saya ada 1 pertanyaan , koq setTraffic(true) kl di jalanin di wilayah asia khusus nya indonesia ga keluar traffic nya ya mas? apa blm di buka sm google nya? tp kl untuk wilayah eropa ada keluar traffic nya.
    Thanks,
    Alfredo

  • Agus Haryanto

    @paulsenjs, caranya hampir sama dengan diatas, yang berbeda hanya file debugkeystor, diganti dengan file keystore yang kita buat atau gunakan pada saat menggenarete file APK

Leave a Reply

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>