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

  • Taufan

    itu geopoint nya belum diimport….

  • randi

    Om kalau muncul kaya gini kesalahnya dimana? “your project contains error please fix them before running your application”
    Mohon pencerhanya

  • iya saya jg ga bsa ni tampilin mapnya..cuma kotak kotak..
    padahal udah bener api keynya…sya koneksi brwoser emulator ke google.com jg bsa
    knp ya??ada solusi??

  • raden

    buat temen2 yang masih kotak2 tampilannya n debug keystore yang cuma tampil SHA 1 ja
    coba langkah ini lagi

    6. Kita buat MD5 FingerPrint dengan menggunakan command keytool.exe yang ada pada java SDK, biasanya terletak di “C:\Program Files\Java\\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

    tapi tambahkan -v setelah keytooll.exe

    keytool.exe -list -alias androiddebugke
    y -keystore “C:\android\debug.keystore” -storepass android -keypass android

    setelah dienter maka akan muncul semua data2nya

    smoga bermanfaat

    hasil ubek2 mbah google shari smalam nih
    akhirnya muncul jg mapnya
    heheheehehe

    /Raden

  • raden

    ralat temen2
    yang atas lum ada -v nya

    keytool.exe -v -list -alias androiddebugkey -keystore “C:\android\debug.keystore” -storepass android -keypass android”

    /Raden

  • Dear pak agus, untuk mendapatkan key api dari google, kayaknya udah beda.
    Saya akses ke : http://code.google.com/android/maps-api-signup.html (monggo di-cek)

    Nggak ada pilihan untuk memasukkan MD5, adanya saya ikuti bisa masukin SHA1 untuk generate key api. Dan kita harus mengaktifkan beberapa fitur yang mau dipakai.
    Itu bagaimana ya pak?
    Saya sudah mendapatkan key api (dari masukin SHA1 di https://code.google.com/apis/console )
    dan saya ikuti intruksi sesuai pak agus di atas.
    Lalu, peta nya tidak muncul. T_T.

    Help help…

  • darma

    slmt pgi pak agus,,
    saya jg sudah mencoba membuat seperti yg pak agus buat diatas, tpi petanya ttp tdk mw mncul,
    dan seperti kata itakzui,key api google uda beda, apakah ada cara lain untuk menampilkan petanya?
    terima kasih..
    mohon bantuannya,,

  • Agus Haryanto

    @itakzui dan @darma.
    Ia betul sudah beda, coba link ini https://developers.google.com/maps/documentation/android/v1/maps-api-signup

  • makasih mas agus.,
    berkat info ini saya mendapatkan api key google dan juga bisa melanjutkan skripsi saya.,

  • donigli

    mas, file debugkeystorenya da da di direktori C:\Documents and Settings\\Local Settings\Application Data\Android
    gmn tu mas..?

  • donigli

    lanjutan >> file yg ada difolder android (dikomputer saya)cuma ada:
    avd
    cahce
    adb_usb
    adbkey
    androidwin.cfg
    ddms.cfg
    repositories.cfg
    sites-settings.cfg

    nah ga da file debugkeystore sperti yg mas bilang..
    gmn tu mas..?
    mohon bantuan nya mas.. 🙁

  • Sangat membantu sekali mas tutorialnya, trims 🙂

  • alzill

    bwt yg bingung cari debugkeystore, buka aja eclipse nya.. trus Window->preferences
    Kmudian di sebelah kiri, klik android->Build nanti di sebelah kanan akan terlihat lokasi debugkeystore berada

  • itakzui

    Terimakasih mas agus,
    kemudian, ketika di-compile muncul eror ini :

    Installation error: INSTALL_FAILED_MISSING_SHARED_LIBRARY
    Please check logcat output for more details.
    Launch canceled!

    Itu kenapa ya mas?

    Thanks.

  • Agus Haryanto

    @itakzui, coba cek diandroid manifestnya, sudah includekan library googlemapsnya atau belum.

  • itakzui

    oke, mas agus. sudah bisa. ^_^. kamsiaa…

  • Fuad

    semua langkah sudah saya ikuti tapi di emulator cm muncul tampilan kayak milli meter blok dan di log cat muncul notifikasi MapActifity “couldn’t get connection factory client”,,
    kira2 kenapa ya om??

    mohon pencerahanya…
    thanks

  • artika

    certificate fingerprint saya kok nggak ada MD5 ya??? tapi SH1 trus uda saya masukin ke webnya. tapi yang ada malah katanya key saya nggak valid gitu… gimana tuh?
    mohon bantuannya

  • Agus Haryanto

    @artika, coba dibaca komen-komen yang diatasnya

  • delfian

    mas saya dah coba buat keystore lg menggunakan build apk tapi pas mau generate lg kok katany gagal karena passwordny berbeda

  • myusro

    Great tutorial, Trims Mas Agus H.
    Buat yang bekerja dengan Linux Ubuntu, berikut instruksi untuk mendapatkan MD5 Key Api:
    —–
    myusro@myusro:~$ keytool -v -list -alias androiddebugkey \-keystore /home/myusro/.android/debug.keystore
    Enter keystore password: android
    —–
    Semoga berguna

  • setiawan

    mas Agus apasih bedanya MapActivity dengan FragmentActifity ?

  • ezen

    koq pada class : TampilkanMap R.layout.main salah melulu mass,
    kategori kesalahan : R cannot be resolved
    tolong pencerahannya

    mksh

  • Pritho

    mas agus,kalau misalnya key MD5 yg dari googlenya lupa,bisa diperoleh kembali apa gak?
    truz kalau misalnya gak bisa diperoleh lagi,cara daftarnya lagi ke googlenya juga gimana?
    mohon bantuannya

  • Agus Haryanto

    @pritho, kalau key MD5 asalkan masih dari keydetore yang sama, harusnya sama nilainya

  • Pritho

    mas,saya sudah coba buat program yang di web mas agus ini,,,,,,
    emang sih bisa di run,tapi tampilan emulatornya kuq cuman muncul kotak2 aj,,,,,,
    jadi gak nampil map kayak di webnya mas agus,,,,,,,
    mohon bantuannya,,,,,,,

  • Agus Haryanto

    @Pritho, Untuk yang ini masih pakai GoogleMaps Api V1 dan untuk generate Keynya sudah tidak disediakan Google. jadi coba pakai yang GoogleMaps android V2

  • teguh jiwandana

    mas, sebelumnya saya sudah mengikuti tutorial mas agus, dan sudah bisa, tetapi setelah saya coba beberapa hari lagi, mapnya tidak mau muncul .
    apakah tidak ada tutorial untuk GoogleMaps andorid v2 nya mas?

  • encun

    mas agus.. punya saya juga gag muncul cma kotak2 udah ikuti perintah2 dan komentar2 d atas.. :nangis: buat tugas besok 🙁
    helep plisss

  • thea

    mas saya udah masukin kodingan google maps dan ga ada yang error , tapi pas saya buka maps di android maps nya kosong, tampilannya putih,itu kenapa ya mas ? makasih

  • assan

    Mas agus saya boleh minta tutorial cara buat da mendapatkan APIkey yg lengkap, soal’a sya bingung ngikutin petunjuk2 ni. maklum newbie mas..
    mohon kirim di email aja mas.
    terima kasih sebelum nya.

  • Agus Haryanto

    @assan yang ini apikeynya sudah disediakan google. Saran saya gunakan Googlemaps API V2

  • cepy

    mas agus sy bingung cara menggunakan google mpa api v2 sy kemarin sudah terlanjur menggunakan google map . tapi ketika sy buka lagi peta yg diandroid nya tdk muncul. ada solusi?

  • Ayu

    Caranya menentukan long lat gimana om?

  • Mariada

    mas Agus ada tutorial yang lain untuk menambahkan key google map nya. soalnya saya bingung dengan tutorial yang mas buat. terimakasi

  • mas, saya udah pake Google Maps V2 API 19, kok masih kotak2 ya hasilnya?

  • Rizka

    Saya kok udah nyoba tapi kok di bagian dibawah ini yang salah yah pak… mohon pencerahannya …soalnya buat tgs saya

    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)

  • Agus Haryanto

    @Rizka, GoogleMap V1 keynya sudah tidak bisa lagi dibuat jadi coba pakai GoogleMaps V2

  • Rizka

    udah pak saya udh daftar google map api v2 tapi ttp aja salah …

  • yoga

    Pak, kok google maps saya gak bisa nampil ya? ngeblank gt. padahal udah bisa running di hape saya. kenapa ya?

  • agungs

    pak, kenapa ya udah saya coba semua emang gak ada yang error.. tapi keluarnya kotak-kotak (gak keluar map) padahal tombol zoom udah keluar, mohon pencerahan pak 😀
    #nb saya juga kok beda ya cara pembuatan Google Maps Api Key? :/
    thanks pak, mohon dijawab, saya tunggu 🙂 hehehe
    sukses terus pak 🙂

  • pak saya sudah ikutin semua tutorial diatas. di main.xml juga sudah saya masukkan API keynya.. tapi ketika aplikasi dijalankan, cuma muncul kotak putih2.. mohon bantu

  • adha aja

    mas saya mau tanya,,,,
    kenapa kok tampilan map saya tidak muncul???
    padahal saya sudah menggunakan GoogleMaps V2….

    ketika saya running,,,hanya tampilan kotak-kotak saja,,,tapi meker dan lokasinya muncul dan tidak ada gambar mapnya

  • inokers

    kejadianku juga sama seperti teman2 datas..tapi akhirx saya menemukan solusinya..saat kita membuat file aplikasi android jadi APK kita mengguna keystore yang kita buat saat mendapatkan SHA1 klo pxaku adanya di C:users\.android\debug.keystore. jadi saat kita membuat file APKnya kita tidak perlu membuat key yang baru lagi karena kita sudah membuat keynya saat kita ingin mendapatkan sertifikat SHA1.maaf pak agus hanya untuk menerangkan pada teman2 yang masih belum berhasil membuatnya.. punyaku dah berhasil,makasih banyak pak agus atas tutorialnya,sukses selalu

  • Dina Fitrah Sari

    Pak, saya mau tanya aplikasi yang saya jalankan melalui emulator kok “launc canceled” ya pak? Mohon solusinya pak

  • maps tidak muncul di eclipse dengan kesalahan Couldn’t get connection factory client:
    tolong solusinya gimana yang jelas dan tepat:

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>