Last Updated on 13 years by Mas Herdi
Tutorial ini menggunakan library Android Maps API v1 yang sudah obsolete/tidak update, untuk mendapatkan tutorial yang update kalian bisa mengunjungi link Tutorial Menampilkan Maps Menggunakan Android Maps API v2 dan MapFragment.
Kali ini saya akan membahas bagaimana cara menampilkan Google Maps pada aplikasi Android buatanmu, sebenarnya ada dua cara, yang pertama memakai AndroidMapsAPI (atau MapView) dan yang kedua memakai WebView.
Yang akan dibahas di post ini adalah cara menampilkan peta menggunakan MapView. Cara yang pertama, memakai MapView lebih disarankan karena kita tidak perlu repot-repot dua kali coding ketika ingin membuatnya, namun kekurangannya MapView bukanlah paket yang otomatis ter-include di dalam Android SDK, sehingga kamu harus mendownload package tambahan bernama GoogleAPIs, seperti yang terlihat pada gambar di bawah ini :
Jadi, langkah pertama kamu harus mempunyai GoogleAPIs SDK terlebih dahulu! Setelah itu, untuk bisa menampilkan maps memakai MapView kamu harus mempunyai MapsAPIKey yang bisa didownload di site Android Maps API.
Langkah-langkah Mendapatkan Maps API Key (Environment Windows, yang lain bisa menyesuaikan ^^)
- Pertama-tama, kamu harus mendapatkan Android certificate MD5 fingerprint dari debug keystore yang biasanya terdapat di “C:\Users<your name>.androiddebug.keystore”
- Buka command prompt
- Ketikkan
keytool -list -keystore "C:\Users<your name>.androiddebug.keystore"
.
Ketika diminta untuk memasukkan password, kamu bisa mengosongkan saja atau tuliskan “android” sebagai password.
Note: Apabila kamu menggunakan JDK 1.7, command yang harus diketik adalah
keytool -v -list -keystore "C:\Users<your name>.androiddebug.keystore"
.
Kemudian pilih yang MD5 Hash certificate, karena jika tidak, maka certificate fingerprint yang dicetak akan berformat SHA1, sedangkan yang dibutuhkan adalah MD5.
- Copy paste MD5 fingerprint yang telah di-generate
- Kemudian Sign-up untuk MapsAPIKey, dan pastekan fingerprint tersebut di sini.
- Dan, kamu pun memperoleh MapsAPIKey !
Next Step
Setelah memperoleh Maps API Key, sekarang kita akan membuat aplikasi contoh. Buka Eclipse dan buat Android Virtual Device baru yang mempunyai fitur Google APIs. Setelah itu create new Android Application, dan pastikan memakai AVD yang mempunyai fitur Google APIs.
Kemudian pada kelas main activity (misal TestMapActivity.java), pastekan kode berikut ini:
import android.app.Activity; import android.graphics.Point; import android.os.Bundle; import com.google.android.maps.GeoPoint; import com.google.android.maps.MapActivity; import com.google.android.maps.MapController; import com.google.android.maps.MapView; import com.google.android.maps.MyLocationOverlay; @SuppressWarnings("unused") public class TestMapActivity extends MapActivity { /** Called when the activity is first created. */ private MapView map; private MapController controller; @Override public void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.main); initMapView(); initMyLocation(); } @Override protected boolean isRouteDisplayed() { // TODO Auto-generated method stub return false; } private void initMapView() { map = (MapView)findViewById(R.id.map ); controller = map.getController(); map.setSatellite(true); map.setBuiltInZoomControls(true); } private void initMyLocation() { final GeoPoint point = new GeoPoint(6,-108); final MyLocationOverlay overlay = new MyLocationOverlay(this, map); overlay.enableMyLocation(); overlay.runOnFirstFix(new Runnable() { public void run() { controller.setZoom(8); controller.animateTo(point); controller.setCenter(point); } } ); map.getOverlays().add(overlay); }
Pada kode di atas, ada beberapa hal yang perlu diperhatikan :
- Pada saat activity pertama kali dibuat atau onCreate(), akan memanggil method initMapView() dan initMyLocation()
- Method initMapView() berfungsi untuk inisialisasi peta, berisi :
map = (MapView)findViewById(R.id.map ); //untuk mengambil MapView dan menampilkan map.setSatellite(true); //untuk mengeset default view ke satellite mode map.setBuiltInZoomControls(true); //secara default menampilkan Zoom Controls</pre>
- Kemudian method initMyLocation() berfungsi untuk inisialisasi lokasi peta saat pertama kali dibuka, berisi
final GeoPoint point = new GeoPoint(6,-108); //berfungsi untuk mengeset koordinat awal pada titik 6,-108 (latitude, logitude) controller.setZoom(8); //berfungsi untuk mengeset zoom level maps ke level 8 controller.animateTo(point); //untuk memindahkan lokasi awal peta ke koordinat "point" controller.setCenter(point); //untuk mengeset "point" sebagai koordinat awal peta
Layout
Pada Android main.xml isikan kode berikut, berfungsi sebagai layout yang akan menampilkan MapView:
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/frame" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" > <com.google.android.maps.MapView android:id="@+id/map" android:apiKey="YourMapsAPIKey" android:layout_width="fill_parent" android:layout_height="fill_parent" android:clickable="true"/> </LinearLayout>
Pada bagian
android:apiKey="YourMapsAPIKey"
, gantilah YourMapsAPIKey dengan Maps API KEY yang telah kamu peroleh tadi!
The Permission
MapView tentu saja membutuhkan koneksi internet untuk bisa mengakses peta dari Google Maps dan juga aplikasi akan membutuhkan akses untuk COARSE_LOCATION (deteksi lokasi berdasarkan GSM provider) atau FINE_LOCATION (deteksi lokasi berdasarkan GPS satelit), karena itu tambahkan permission berikut pada Android Manifest. Buka AndroidManifest.xml dan isikan kode berikut di baris sebelum
<application>
tag:
<uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION" /> <uses-permission android:name="android.permission.INTERNET" />
Sekarang, cobalah jalankan aplikasimu !
PS: MapView hanya bisa terhubung ke jaringan yang sama sekali tidak diproteksi apapun, apabila koneksi internetmu menggunakan proxy, maka MapView tidak akan bisa menampilkan peta, dan akan ada error “Couldn’t get connection factory client” Kekurangan ini dilaporkan sebagai bug.
UPDATE : Maaf karena ada yang kurang dari tutorial ini, jangan lupa untuk menambahkan kode
<uses-library android:name="com.google.android.maps" />
pada AndroidManifest.xml di dalam Activity tag. Good luck!
klo di linux cara settingnya gmana?
Intinya sama, gunain aja command keytool dan masukin debug.keystore -nya Android (lokasi biasanya di folder home/user) sebagai argumen inputan
mas.. kok di emulator saya mapnya ga muncul ya.. saya pake AVDny yang 2.2.3 API 10 mas.. help.. 🙂
Oh… mungkin gara-gara Anda belum dapetin Maps API Key nya mas…
Kalo masih belum bisa, coba kasih lihat peringatan errornya gimana ^^
Mas napa koq pertama kali di klik petanya langsung muncul kotak2 trus di tengahnya ada tanda silang.kira2 yang salah apanya mas?….
Kamu belum menggunakan MAPS API KEY dengan benar, atau ada masalah dengan koneksi internetmu. Coba browsing lewat browser di Android emulator untuk ngetest koneksi internetnya 🙂
@PS: sedikit koreksi mas, MapView tetep bisa menampilkan peta meskipun via proxy, yang penting pada Eclipse>Run Configuration>Target ditambahkan proxy dan port numbernya.
Untuk error “Couldn’t get connection factory client” tetep muncul meskipun emulator dah nyambung internet dan bisa tampilkan peta.
Btw, artikelnya bagus mas,,,detail dan jelas.
Tks.
Tetapi saya sekrang sedang mengealamai masalah di mana muncul error “Couldn’t get connection factory client” dan peta tidak dapat ditampilkan, melainkan hanya latar hitam. kenapa ya?
@Levi, biasanya itu karena koneksi internetnya yang bermasalah. Coba buka google.com lewat browser simulator Android, pastikan bisa berjalan 🙂
Terima kasih mas atas koreksinya. Nanti akan saya coba 🙂
gan bsa cara mendptkan ulang nilai md5 dan apikey untuk ke 2 kali gman ya gan? mohon bantuanya.
Kalau untuk komputer yang sama, caranya sama kayak di atas gan…
Cuma kalo mau dapet API Key kedua yang beda sama yang pertama, harus dari komputer/laptop lain 🙂
mas pas saya jalankan program nya di emulatornya ada keterangan “The application has stopped unexpectedly. Please try again”. Itu kenapa ya? Mohon bantuan nya mas. Best regard,
Nah tulisan error di Logcatnya gimana? Coba kamu baca dulu postingan ini http://www.twoh.web.id/2013/02/mengatasi-force-close-pada-aplikasi-android-menggunakan-logcat/
mas,,saya sangat senang dengan tutoril ini,,tapi mas saya mau tanya,,kalaw membuat map terus menampilkan jalur transportasinya,,gmn mas,,,sekaligus untuk databasex itu masukkanya bagaimana agar bisa kepanggil untuk menampilkan jalur transportasi itu tadi,,tolong ya mas bantuannya,,
Missing styles. Is the correct theme chosen for this layout?
Use the Theme combo box above the layout to choose a different layout, or fix the theme style references.
Failed to find style ‘mapViewStyle’ in current theme
mas, di layout saya muncul tulisan ini dan tidak mau d run.. Mohon pencerahan
Mastah, kok ane run programnya eror gini “unfortunately, [namaprogram] has stopped. di logcat nya :
java.lang.RuntimeException: Unable to instantiate activity ComponentInfo{com.example.map2/com.example.map2.MainActivity}: java.lang.ClassNotFoundException: Didn’t find class “com.example.map2.MainActivity” on path: DexPathList[[zip file “/data/app/com.example.map2-1.apk”],nativeLibraryDirectories=[/data/app-lib/com.example.map2-1, /vendor/lib, /system/lib]]
tolong ya mastah :’) Thanks
https://code.google.com/intl/id/android/maps-api-signup.html <<<< bro kenapa link ini ga bisa yaa ???
gan punya ane ko keluar error unfortunately (nama app) stopped ??
itu apanya ya gan??
Mas itu yg bagian
map = (MapView)findViewById(R.id.map );
id itu bermasalah kenapa mas?