Last Updated on 12 years by Mas Herdi
Kali ini kita akan belajar tentang bagaimana cara menampilkan Android Maps pada Android menggunakan WebView, pada dasarnya hal ini sama seperti waktu kita menampilkan Google Maps pada HTML, kita hanya perlu membuat sebuah file HTML dengan Google Maps script di dalamnya dan kemudian menampilkan laman HTML tersebut.
Ok, fellas, sebelumnya ada satu lagi cara menampilkan Maps pada Android, yaitu menggunakan MapView. Namun karena posting ini bukan membahas tentang cara yang itu, maka kita akan membahas cara yang ini (?). Sebelumnya, buatlah dulu sebuah project di Android dengan nama MapWebView.
The HTML
Pertama-tama, buatlah file bernama maps.html dan letakkan pada folder assets di proyek Android anda. Dan kemudian isikan dengan kode berikut :
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var myOptions = {
center: new google.maps.LatLng(35.683183, 139.732435),
zoom: 16,
mapTypeId: google.maps.MapTypeId.HYBRID
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
var image = 'university.png';
var myLatLng = new google.maps.LatLng(35.683183, 139.732435);
var marker = new google.maps.Marker({
position: myLatLng,
map: map,
icon: image
});
var infowindow = new google.maps.InfoWindow({
content: "I'm coming! Sophia University!!"
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map,marker);
});
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width:300px; height:600px"></div>
</body>
</html>
Well, untuk icon marker “university.png” bisa didownload di sini. Halaman HTML tersebut digunakan untuk menampung scripts yang berfungsi untuk menampilkan Google Maps, yang nantinya akan kita tampilkan lewat WebView. Selanjutnya,
WebView Layout
WebView layout ini, bisa dibilang sederhana. Fungsi dari layout WebView adalah untuk menampilkan HTML pada aplikasi android, webview juga bisa digunakan untuk browsing. Masuk ke res/layout/ dan pastekan kode berikut di main.xml.
<?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:orientation="vertical" android:layout_width="fill_parent" android:layout_height="fill_parent" > <WebView android:id="@+id/web_view" android:layout_width="fill_parent" android:layout_height="wrap_content" android:layout_weight="1.0" /> </LinearLayout>
Guess what, WebView inilah yang berfungsi menjadi perantara antara HTML dan aplikasi Android kita.
Main Activity
Oke, kemudian pada Main class Android, kita definisikan aktivitas sebagai berikut,
MapWebView
import android.app.Activity;
import android.os.Bundle;
import android.webkit.WebChromeClient;
import android.webkit.WebView;
public class MapWebViewActivity extends Activity {
/** Called when the activity is first created. */
private WebView webView;
@Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.main);
//Mengeset webView sebagai layout utama
webView = (WebView) findViewById(R.id.web_view);
//memanggil method openBrowser #youdontsay
openBrowser();
}
//karena ada method static yang diakses oleh method non-static (openBrowser)
@SuppressWarnings("static-access")
private void openBrowser()
{
//memanggil URL, /// berguna untuk menandakan bahwa file yang diakses
//sedangkan android_asset merefers ke folder assets yang ada di
//proyek androidmu
String url = "file:///android_asset/maps.html";
//Menginstantiasi webchrome client baru, buat gaya-gayaan aja B)
WebChromeClient wcc = new WebChromeClient();
webView.setWebChromeClient(wcc);
//mengaktifkan javascript, kalo nggak aktif... TRY IT!
webView.getSettings().setJavaScriptEnabled(true);
//mengaktifkan built in zoom controls
webView.getSettings().setBuiltInZoomControls(true);
//bagian ini akan dijelaskan
webView.enablePlatformNotifications();
//meload URL
webView.loadUrl(url);
}
}
Pada barisan kode di atas, maaf kalo terlihat berantakan, soalnya saya males njelasin terpisah, jadi saya jelaskan sekalian di comment. Oke, di bagian ini,
webView.enablePlatformNotifications();
statics method enablePlatformNotifications() berfungsi untuk untuk mengaplikasikan setting-an yang telah diatur pada emulator, termasuk setting-an proksi. Jadi apabila kalian berada di lingkungan yang dilindungi oleh proksi, webview ini masih bisa mengakses internet, asal settingan proksinya telah diatur terlebih dahulu.
Kemudian, dokumentasi Android sendiri sudah mengkategorikan method enabledPlatformNotifications() sebagai method yang deprecated/obsolete. Sehingga sekarang notifications ter-enabled secara default. Namun, sebagai catatan, walapun begitu saya mencoba untuk menghilangkan penggunaan method ini dan menjalankannya di lingkungan ber-proksi, hasilnya aplikasi tidak menampilkan apa-apa.
Jika kalian mempunyai koneksi bebas hambatan, maka method tersebut tidak usah digunakan dalam kode.
Android Manifest
Terakhir, sekarang seperti biasa kita akan mengatur permission dan lain-lainnya pada file AndroidManifest.xml. Tambahkan dua baris kode berikut ini tepat sebelum tag.
<uses-permission android:name="android.permission.INTERNET"/> <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
.
Permission yang terakhir, ACCESS_NETWORK_STATE digunakan berhubungan dengan method yang deprecated tadi.
Inilah tampilan akhir ketika program dijalankan.
Android Maps WebView
WebView atau MapView?
Sekarang kita telah mengetahui dua buah cara untuk menampilkan Maps pada Android. Manakah yang lebih baik untuk digunakan? Menampilkan peta menggunakan WebView, atau langsung menggunakan MapView dan menampilkan Android Maps menggunakan GoogleAPIs.
WebView
– kelebihan : bisa mengatasi fragmentasi, mengatasi proksi
– kekurangan : kalian harus coding dua kali, coding Java untuk aplikasi Android, dan coding HTML + Javascripts untuk web-nya dan tampilan kadang tidak sesuai yang diinginkan
MapView
– kelebihan : tidak perlu repot2 mengatur HTML dan Java, cara resmi yang dianjurkan, dapat dimodifikasi
– kekurangan: tidak bisa mengakses peta di lingkungan berproksi
Anyway, kesimpulannya WebView robust ketika digunakan untuk membuat aplikasi berbasis web lainnya, HTML5, Ajax dan lain lain. Namun tidak untuk aplikasi full menggunakan PETA, untuk aplikasi geografi-oriented, saya pribadi lebih menganjurkan memakai MapView/ Android Maps secara langsung.
Maaf mw tanya..itu data yg disimpan di asset termasuk bisa dikatakn penyimpanan database bukan? Klo iya nama database nya apa ya? soalnya saya sdng membuat tgs kul tntng aplikasi android tp mble learning, dan data2 nya saya simpan difolder bag asset,.
Mhn jwbnnya. Mksh..
Bukan kalo di assets itu beda lagi dengan database. Kalau database di Android kita harus buat sendiri pakai SQLite 🙂
maaf mas, itu yang HTML..
Pengaturan tanda ( ‘ ) / petik jadi masalah nggk? soalnya, hasil yang saya dapet beda sama yang digambar diatas.
pada bagian ‘university.png’ , (“map_canvas”) dan ‘click’ dihapus nggk kutipnya ?
Terima kasih.
maaf mas, itu yang HTML..
Pengaturan tanda ( ‘ ) / petik jadi masalah nggk? soalnya, hasil yang saya dapet beda sama yang digambar diatas.
pada bagian ‘university.png’ , (“map_canvas”) dan ‘click’ dihapus nggk kutipnya ?
Terima kasih.
nggak perlu dihapus gan…
cuma mungkin di bagian content: “I’m coming! Sophia University!!”
bisa diganti dengan yang lain 🙂
bang kan aplikasinya basis web terus di compaile jadi apk tetapi akhirnya mao navigasinya ga bisa kenapa ya gan, mohon bimbingannya
keren Om Twoh,bakalan mampir kesini tiap hari ni..
Blajar Robot ijo
Mastah, mau tanya nih,
ane ada eror dibagian —> WebView.enablePlatformNotifications(); <—-
erorrnya tidak terdefinisi di tipe webview nya, gimana solusinya mastah ??
Thanks 🙂
tinggal diimport saja kelas WebView nya
” blockWebkitDraw lockedfalse ”
masalah nya dimana ya mas.? gx muncul maps nya
Gini mas,,
Saya punya website dan pada website itu link google map nya.
Saya buat webview, hasilnya suksesnya mas, web saya sudah bisa tampil.
Masalahnya ketika saya klik link google mapnya,
Mapnya tidak mau tampil,,
Bagaimana solusinya ?
Thx