Home
Menambahkan Fitur Check In Pada Android Location Based Service [II] (Maps API v2)

Menambahkan Fitur Check In Pada Android Location Based Service [II] (Maps API v2)

by / November 18, 2014/ Android, Android Tutorial, Location Based Service, Maps, Programming/ 1 Comment/

Last Updated on 10 years by Mas Herdi

Oke guys, kali ini kita akan masuk ke bagian kedua tentang implementasi check-in pada Location Based Services. Pada tutorial kali ini kita akan membahas bagaimana cara menampilkan koordinat yang diambil dari database SQLite ke dalam peta. Koordinat tersebut didapatkan dari fitur check-in yang telah kita implementasikan pada postingan sebelumnya. Dimana kita telah membuat sebuah database, objek lokasi, fitur untuk check-in, dan juga listview yang menampilkan semua data hasil check-in.

Jika kalian menemui kesulitan dalam mengikuti tutorial ini, pastikan kalian telah membaca terlebih dahulu pre-requisites di bawah :

Pre-Requisites :

  1. Membuat Location Based Service app menggunakan Android Maps API v2
  2. Membuat Fitur Check-In pada LBS bagian I
  3. Panduan lengkap Database SQLite Android
  4. Panduan lengkap Android Maps API SDK v2

Warming up

Oke, sama seperti yang sudah dibahas pada tutorial sebelumnya. Kita telah bisa membuat fitur check-in yang akan menyimpan data koordinat kita beserta nama tempat pada database. Dan setelah itu kita juga sudah belajar cara menampilkan data tersebut dalam bentuk listview. Yang akan kita lakukan sekarang adalah bagaimana supaya ketika item pada ListView tersebut di-klik, aplikasi akan membawa kita ke halaman peta dan menampilkan koordinat dari database sesuai dengan lokasi yang dipilih.

Supaya tidak terlalu lama 😀 Langsung saja buka project Android yang telah kalian buat sesuai dengan tutorial sebelumnya. Di situ, langsung buka file CheckInActivity.java. Pada bagian onItemClickListener di listview, akan ada kode seperti gambar di bawah :

 

	@Override
	protected void onListItemClick(ListView l, View v, int position, long id) {
		super.onListItemClick(l, v, position, id);

		DBLokasi lokasi = dataSource.getLokasi((int)adapter.getItem(position).getId());
		if(lokasi!=null)
			// lihat di postingan selanjutnya
		else
			Toast.makeText(this, "location is null", Toast.LENGTH_LONG).show();
	}

Kode diatas itulah yang berfungsi untuk menampilkan posisi koordinat di peta sesuai dengan lokasi yang dipilih. Namun saat ini kode tersebut masih kosong, karena itu bisa diganti menjadi method onListItemClick() yang baru seperti di bawah :


	@Override
	protected void onListItemClick(ListView l, View v, int position, long id) {
		super.onListItemClick(l, v, position, id);

		DBLokasi lokasi = dataSource.getLokasi((int)adapter.getItem(position).getId());
		if(lokasi!=null)
			startActivity(new Intent(this, MapsActivity.class).putExtra("lokasi", lokasi));
		else
			Toast.makeText(this, "location is null", Toast.LENGTH_LONG).show();
	}

 

Kita telah memperbaiki kelas CheckInActivity, sehingga pada saat list item diklik akan menuju ke Maps. Sekarang kita akan memodifikasi kelas MapsActivity, sehingga kelas tersebut akan menerima Bundle berisi latlong yang dikirim dari CheckInActivity dan menampilkan lokasinya pada peta. Apabila marker diklik, kita juga akan sekaligus menampilkan data lokasi pada InfoWindow dari Marker.

Buka kelas MapsActivity.java, dan kemudian replace dengan kode di bawah ini :

package id.web.twoh.twohmaps;

import java.util.ArrayList;

import id.web.twoh.twohmaps.R;
import id.web.twoh.twohmaps.model.DBLokasi;

import com.google.android.gms.maps.CameraUpdateFactory;
import com.google.android.gms.maps.GoogleMap;
import com.google.android.gms.maps.GoogleMap.OnMarkerClickListener;
import com.google.android.gms.maps.SupportMapFragment;
import com.google.android.gms.maps.model.BitmapDescriptorFactory;
import com.google.android.gms.maps.model.LatLng;
import com.google.android.gms.maps.model.Marker;
import com.google.android.gms.maps.model.MarkerOptions;

import android.app.Dialog;
import android.os.Bundle;
import android.support.v4.app.FragmentActivity;
import android.view.View;
import android.view.View.OnClickListener;
import android.widget.Button;
import android.widget.TextView;
import android.widget.Toast;

public class MapsActivity extends FragmentActivity{

	private GoogleMap map;
	private DBLokasi lokasi;
	private ArrayList<DBLokasi> values;

	@SuppressWarnings("unchecked")
	@Override
	protected void onCreate(Bundle arg0) {
		super.onCreate(arg0);
		setContentView(R.layout.activity_map);

		SupportMapFragment mapFrag = (SupportMapFragment) getSupportFragmentManager().findFragmentById(R.id.map);
		map = mapFrag.getMap();
		map.setMyLocationEnabled(true);

		Bundle b = this.getIntent().getExtras();

		if(b.containsKey("longitude")){
			final LatLng latLng = new LatLng(b.getDouble("latitude"), b.getDouble("longitude"));
			map.animateCamera(CameraUpdateFactory.newLatLngZoom(latLng, 16));
			map.addMarker(new MarkerOptions().position(latLng).icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_CYAN)));
			map.setOnMarkerClickListener(new OnMarkerClickListener() {
				@Override
				public boolean onMarkerClick(Marker marker) {
					Toast.makeText(MapsActivity.this, "Lokasi saat ini "+latLng.latitude+","+latLng.longitude,Toast.LENGTH_SHORT).show();
					return false;
				}
			});
		}else if(this.getIntent().getSerializableExtra("lokasi")!=null)
		{
			lokasi = (DBLokasi) this.getIntent().getSerializableExtra("lokasi");
			if(lokasi!=null)
			{
				LatLng latLng = new LatLng(lokasi.getLatD(), lokasi.getLngD());
				map.animateCamera(CameraUpdateFactory.newLatLngZoom(latLng, 16));
				map.addMarker(new MarkerOptions().position(latLng).icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_CYAN)).title(lokasi.getNama()));
			}

			map.setOnMarkerClickListener(new OnMarkerClickListener() {

				@Override
				public boolean onMarkerClick(Marker marker) {
					final Dialog dialog = new Dialog(MapsActivity.this);
					dialog.setTitle("Checkin Data :");
					dialog.setContentView(R.layout.fragment_dialog_datashow);
					TextView tvNama = (TextView) dialog.findViewById(R.id.tv_nama);
					TextView tvKoordinat = (TextView) dialog.findViewById(R.id.tv_koordinat);
					Button btOK = (Button) dialog.findViewById(R.id.bt_checkin_ok);

					tvNama.setText(String.format(getResources().getString(R.string.checkin_label_nama), marker.getTitle()));
					tvKoordinat.setText(marker.getPosition().latitude+","+marker.getPosition().longitude);
					btOK.setOnClickListener(new OnClickListener() {

						@Override
						public void onClick(View v) {
							dialog.cancel();

						}
					});
					dialog.show();

					return false;
				}
			});
		}else
		{
			LatLng init;
			DBLokasi lokInit;
			LatLng latLng;
			values = ((ArrayList<DBLokasi>) this.getIntent().getSerializableExtra("arraylokasi"));
			lokInit = values.get(0);
			init = new LatLng(lokInit.getLatD(), lokInit.getLngD());
			map.animateCamera(CameraUpdateFactory.newLatLngZoom(init, 16));
			for(DBLokasi lok : values)
			{
				latLng = new LatLng(lok.getLatD(), lok.getLngD());
				map.addMarker(new MarkerOptions().position(latLng).icon(BitmapDescriptorFactory.defaultMarker(BitmapDescriptorFactory.HUE_CYAN)));
			}

			map.setOnMarkerClickListener(new OnMarkerClickListener() {

				@Override
				public boolean onMarkerClick(Marker marker) {
					final Dialog dialog = new Dialog(MapsActivity.this);
					dialog.setTitle("Checkin Data :");
					dialog.setContentView(R.layout.fragment_dialog_datashow);
					TextView tvNama = (TextView) dialog.findViewById(R.id.tv_nama);
					TextView tvKoordinat = (TextView) dialog.findViewById(R.id.tv_koordinat);
					Button btOK = (Button) dialog.findViewById(R.id.bt_checkin_ok);

					tvNama.setText(String.format(getResources().getString(R.string.checkin_label_nama), marker.getTitle()));
					tvKoordinat.setText(marker.getPosition().latitude+","+marker.getPosition().longitude);
					btOK.setOnClickListener(new OnClickListener() {

						@Override
						public void onClick(View v) {
							dialog.cancel();

						}
					});
					dialog.show();
					return false;
				}
			});
		}

	}

}

Kira-kira itu saja yang perlu ditambahkan untuk implementasi check-in tahap 2. Sekarang kita sudah bisa menampilkan lokasi check-in kita pada peta. Logika jalannya aplikasi secara sederhana adalah, ketika kita meng-klik item pada list view, aplikasi akan mengambil data lokasi pada database sesuai dengan id item yang diklik. Kemudian lokasi tersebut akan di-passing kan menggunakan Bundle ke MapsActivity.java, yang akan menampilkan lokasi tersebut pada peta.

DEMO

Langsung saja buka aplikasi TWOH Maps v2 dan langsung menuju ke halaman Check In. Di punya saya, sudah ada contoh 1 data. Apabila belum ada data, silahkan Check In terlebih dahulu.

Halaman Check in pada TWOH Maps v2

Halaman Check in pada TWOH Maps v2

Kemudian ketika item itu diklik, akan muncul marker penanda lokasi tersebut pada peta.

Koordinat check in ketika ditampilkan pada peta

Koordinat check in ketika ditampilkan pada peta

Apabila marker tersebut diklik, akan muncul data check-in seperti berikut :

Data check in ketika marker di klik

Data check in ketika marker di klik

That’s all folks! 🙂

Untuk source code lengkapnya, kalian bisa download pada repository di GitHub saya. Silahkan bertanya-tanya di forum atau komentar di bawah apabila ada yang kurang jelas.

 





Download aplikasi kami di Google Play Store


Tutorial Menarik Lainnya :

About The Author

Mas Herdi

Seorang pengamat teknologi Java, Android, dan Google. Di sini kalian bisa membaca tulisannya tentang hal-hal itu, dan juga tulisan lain mengenai startup, bisnis, entrepreneur, sosial dan sebagainya. Follow Instagram kami. Untuk konsultasi lebih lanjut .

Tags: , , , , , , , ,
One Response
  1. Brahmanggi Aditya October 22, 2015

    maaf numpang tanya ini buat class baru yah?

    import id.web.twoh.twohmaps.R;
    import id.web.twoh.twohmaps.model.DBLokasi;

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

TWOH&Co.