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 WebViewAndroid 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.



Download aplikasi kami di Google Play Store