Tutorial Membuat Aplikasi Android Maps Sederhana

EncDev - Aplikasi maps yang digunakan untuk mencari lokasi – lokasi yang diinginkan merupakan aplikasi yang memiliki banyak sekali manfaat, penggunaanya seringkali dibutuhkan ketika kita masuk ke satu kota yang kita sama sekali belum pernah mengunjungi kota tersebut. Pada tutorial Programming Android kali ini kita akan berlatih membuat aplikasi maps sederhana dengan menggabungkan penggunaan webkit dengan maps di android. Aplikasi yang akan kita buat diharapkan nantinya dapat menunjukkan lokasi – lokasi yang bermanfaat bagi wisatawan maupun penduduk lokal yang kesulitan mencari lokasi semisal Rumah Sakit, Hotel, Mini Market, Pom Bensin.

Pada tutorial ini kami hanya akan memberikan sedikit contoh saja penerapan maps pada aplikasi android. Nantinya diharapkan Anda dapat berkreasi sendiri dengan mengembangkan aplikasi sesuai dengan kebutuhan Anda.

Tanpa berlama – lama kita akan langsung praktek dengan membuat aplikasinya.
Buat project android seperti berikut:
Application Name                : SalatigaCity
Project Name                       : SalatigaCity
Package Name                     : salatigadev.com.salatigacity
Minimum Required SDK       : Andoid 2.2
Target SDK                           : Android 4.2
Yang lain biarkan default, Anda bisa merubah nama aplikasi atau project sesuai yang Anda inginkan.
*Untuk kebutuhan desain icon untuk tampilan aplikasi Anda dapat membuat sendiri atau download disini, taruh di folder drawable pada project.

Buka file activity_main.xml di direktori res/layout dan isi code seperti berikut:

res/layout/activity_main.xml

<?xml version="1.0" encoding="utf-8"?>

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" android:id="@+id/RelativeLayout1" android:layout_width="fill_parent" android:layout_height="fill_parent" android:layout_gravity="center" android:orientation="vertical" >

    <ImageButton android:id="@+id/imageButton1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentLeft="true" android:layout_below="@+id/relativeLayout2" android:layout_marginLeft="22dp" android:layout_marginTop="20dp" android:onClick="onrsClick" android:src="@drawable/rs" />

    <ImageButton android:id="@+id/imageButton2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignParentRight="true" android:layout_alignTop="@+id/imageButton1" android:layout_marginRight="22dp" android:onClick="onHotelClick" android:src="@drawable/hotel" />

    <TextView android:id="@+id/textView1" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@+id/imageButton1" android:layout_below="@+id/imageButton1" android:text="Rumah Sakit" android:textAppearance="?android:attr/textAppearanceMedium" />

    <TextView android:id="@+id/textView2" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@+id/imageButton2" android:layout_below="@+id/imageButton2" android:text="Hotel" android:textAppearance="?android:attr/textAppearanceMedium" />

    <ImageButton android:id="@+id/imageButton3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@+id/textView1" android:layout_below="@+id/textView1" android:layout_marginTop="14dp" android:onClick="onMinimarketClick" android:src="@drawable/minimarket" />

    <TextView android:id="@+id/textView3" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@+id/imageButton3" android:layout_below="@+id/imageButton3" android:text="Mini Market" android:textAppearance="?android:attr/textAppearanceMedium" />

    <ImageButton android:id="@+id/imageButton4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@+id/textView3" android:layout_alignLeft="@+id/textView2" android:onClick="onPombensinClick" android:src="@drawable/pom_bensin" />

    <TextView android:id="@+id/textView4" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignBaseline="@+id/textView3" android:layout_below="@+id/imageButton4" android:layout_alignBottom="@+id/textView3" android:layout_alignLeft="@+id/imageButton4" android:text="Pom Bensin" android:textAppearance="?android:attr/textAppearanceMedium" />

   

    <ImageButton android:id="@+id/imageButton5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@+id/textView1" android:layout_below="@+id/textView3" android:layout_marginTop="14dp" android:onClick="onAboutClick" android:src="@drawable/about" />

    <TextView android:id="@+id/textView5" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignLeft="@+id/imageButton5" android:layout_below="@+id/imageButton5" android:layout_marginLeft="20dp" android:text="About" android:textAppearance="?android:attr/textAppearanceMedium" />

    <ImageButton android:id="@+id/imageButton6" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_above="@+id/textView5" android:layout_alignLeft="@+id/textView4" android:onClick="onExitClick" android:src="@drawable/exit" />

    <TextView android:id="@+id/textView6" android:layout_width="wrap_content" android:layout_height="wrap_content" android:layout_alignBaseline="@+id/textView5" android:layout_below="@+id/imageButton6" android:layout_alignBottom="@+id/textView5" android:layout_alignLeft="@+id/imageButton6" android:layout_marginRight="29dp" android:text="Exit" android:textAppearance="?android:attr/textAppearanceMedium" />

  

</RelativeLayout>

Buka class MainActivity.java di res/package isi dengan code berikut, code java untuk memanggil tampilan dari activity_main.xml:

MainActivity.java

package salatigadev.com.salatigacity;

import android.os.Bundle;

import android.app.Activity;

import android.view.Menu;

import android.view.View;

import android.content.Intent;

public class MainActivity extends Activity {

        @Override

        protected void onCreate(Bundle savedInstanceState) {

               super.onCreate(savedInstanceState);

               setContentView(R.layout.activity_main);

        }

       

        public void onrsClick (View theButton)

        {

               Intent rs=new Intent (this,rsjava.class);

               startActivity(rs);

              

        }

       

        public void onExitClick (View theButton)

        {

               finish();

              

        }

        @Override

        public boolean onCreateOptionsMenu(Menu menu) {

               // Inflate the menu; this adds items to the action bar if it is present.

               getMenuInflater().inflate(R.menu.main, menu);

               return true;

        }

}

Maka dari coding – coding diatas akan menghasilkan tampilan seperti berikut:

Kali ini kita akan membuat untuk tampilan ketika menu rumah sakit dipilih, kita akan membuatnya dalam bentuk listview seperti gambar berikut.

Sekarang kita akan membuat class yang berfungsi untuk menangani tampilan pilihan pada menu.
Buat class rsjava.java dan tulis coding seperti berikut:

rsjava.java

package salatigadev.com.salatigacity;

import android.os.Bundle;

import android.app.Activity;

import android.app.ListActivity;

import android.content.Intent;

import android.view.Menu;

import android.view.View;

import android.widget.ArrayAdapter;

import android.widget.ListView;

public class rsjava extends ListActivity {

        @Override

        protected void onCreate(Bundle icicle) {

               super.onCreate(icicle);

              

               String[] menulokasi = new String[]{"RSUD Salatiga","RSU Ananda","RSU Sejahtera Bhakti","RSU Puri Asih","RSK THT Syifaa Rohmani"};

              

               this.setListAdapter(new ArrayAdapter<String>(this,android.R.layout.simple_list_item_1,menulokasi));

        }

       

        //defenisi untuk handle array di click

        protected void onListItemClick(ListView l,View v,int position,long id)

        {

               super.onListItemClick(l, v, position, id);

               // menangkap string yang click

               Object o = this.getListAdapter().getItem(position);

               String pilihan = o.toString();

               tampilkanpilihan(pilihan);

              

        }

        private void tampilkanpilihan(String pilihan) {

               // TODO Auto-generated method stub

               try

               {

                       Intent i = null;

                       if(pilihan.equals("RSUD Salatiga"))

                       {

                          i = new Intent (this,RSUDSalatiga.class);

                       }

                       if(pilihan.equals("RSU Ananda"))

                       {

                          i = new Intent (this,RSUAnanda.class);

                       }

                       if(pilihan.equals("RSU Sejahtera Bhakti"))

                       {

                          i = new Intent (this,RSUSejahteraBhakti.class);

                       }

                       if(pilihan.equals("RSU Puri Asih"))

                       {

                          i = new Intent (this,RSUPuriAsih.class);

                       }

                       if(pilihan.equals("RSK THT Syifaa Rohmani"))

                       {

                               i = new Intent (this,RSKTHTSyifaaRohmani.class);

                       }

                      

                       startActivity(i);

                      

               }catch(Exception e)

               {

                       e.printStackTrace();

               }

              

        }

}

Kemudian buat class untuk menangani tampilan maps pada lokasi yang dipilih oleh user. Disini kami hanya memberi contoh satu lokasi saja yaitu Rumah Sakit Umum Daerah Salatiga, selebihnya anda bisa berlatih sendiri dengan menambahkan data lokasi yang lainya.
Buat class RSUDSalatiga.java dan tulis code seperti berikut:

RSUDSalatiga.java

package salatigadev.com.salatigacity;

import android.os.Bundle;

import android.app.Activity;

import android.view.Menu;

import android.view.View;

import android.webkit.WebView;

public class RSUDSalatiga extends Activity {

        @Override

        protected void onCreate(Bundle savedInstanceState) {

               super.onCreate(savedInstanceState);

               setContentView(R.layout.rsud_salatiga);

              

               WebView browser = (WebView) findViewById (R.id.rsud_salatiga);

               browser.getSettings().setJavaScriptEnabled(true);

               browser.loadUrl("file:///android_asset/RSUDSalatiga.html");

        }

}

Dari coding diatas, dengan menggunakan webkit maka akan menampilkan sebuah file html yang berisi javascript untuk menampilkan peta lokasi, berikut adalah coding lengkap dari file RSUDSalatiga.html dan simpan pada folder assets pada project.

assets/RSUDSalatiga.html

<!DOCTYPE html>

<html>

  <head>

    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">

    <meta charset="utf-8">

    <title>Simple markers</title>

<style>

      html, body, #map-canvas {

        height: 100%;

        margin: 0px;

        padding: 0px

      }

    </style>

    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>

    <script>

function initialize() {

  var myLatlng = new google.maps.LatLng(-7.327613, 110.496403);

  var mapOptions = {

    zoom: 16,

    center: myLatlng

  }

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var marker = new google.maps.Marker({

      position: myLatlng,

      map: map,

      title: 'Hello World!'

  });

}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>

  </head>

  <body>

<div id="map-canvas"></div>

  </body>

</html>

Nilai -7.327613, 110.496403 merupakan nilai lokasi lattitude dan longitude dari Rumah Sakit Umum Daerah Salatiga. Kemudian file html tersebut dibuka dalam bentuk webview di file rsud_salatiga.xml seperti berikut:

res/layout/rsud_salatiga.xml

<?xml version="1.0" encoding="UTF-8"?>

<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" android:layout_width="fill_parent" android:layout_height="fill_parent" android:orientation="vertical" >

       

<WebView android:id="@+id/rsud_salatiga" android:layout_width="fill_parent" android:layout_height="fill_parent">

</WebView>

</LinearLayout>

Jalankan aplikasi kemudian jika salah satu pilihan lokasi dipilih maka akan menampilkan maps dimana posisi yang kita pilih, dalam hal ini sebagai contoh user memilih Rumah Sakit Umum Daerah Salatiga, sehingga tampilan akan seperti berikut: