Maps API v2 : Implementasi Check In Pada Android Location Based Service [END]

Last Updated on 10 years by Mas Herdi

Oke guys, kita sudah memasuki bagian terakhir dari tutorial series tentang cara menambahkan fitur check in pada aplikasi location based services di Android. Postingan terakhir ini akan membahas bagaimana caranya untuk menampilkan semua lokasi check-in kita pada peta. Yaitu dengan cara mengambil semua koordinat lokasi check-in dari database dan menampilkan semuanya pada Android Maps.

Warming Up

Sebelumnya, marilah kita mengingat-ingat apa yang telah dipelajari sebelumnya. Pada tutorial pertama kita belajar tentang cara menambahkan fitur check-in sehingga kita bisa menyimpan lokasi di database. Selanjutnya di tutorial kedua kita belajar tentang cara menampilkan koordinat lokasi check in yang telah kita simpan pada peta, satu persatu. Nah di tutorial terakhir ini kita akan belajar cara menampilkan semua lokasi sekaligus yang telah kita simpan di database pada Android Maps.

Pre-requisites

Seperti biasa, sebelum kita lanjut ke tutorial, saya sarankan kalian membaca tutorial tentang Google Map for Android API v2 di sini.

Coding

Oke, langsung saja kita mulai codingnya. Di database kita sekarang sudah penuh dengan lokasi-lokasi hasil check-in. Sekarang bagaimana caranya supaya kita bisa menampilkan semua lokasi check-in tersebut ke dalam Google Maps? Jika kalian perhatikan, pada layout CheckInActivity.java sudah ada button “Petakan semua lokasi”, namun tombol tersebut belum berfungsi, sekarang kita menambahkan method OnClick pada tombol tersebut :

		btShowAll.setOnClickListener(new OnClickListener() {
			@Override
			public void onClick(View v) {
				if(values.size()>0)
				{
					startActivity(new Intent(CheckInActivity.this,MapsActivity.class).putExtra("arraylokasi", values));
				}

			}
		});

Method tersebut sebenarnya cukup sederhana, ketika tombol diklik, maka aplikasi akan memanggil startActivity() dan kita akan langsung menuju ke halaman Maps. Pada saat pindah ke halaman Maps, kita akan mengikutsertakan data extra yang berupa array list berisi lokasi, data array tersebut sebelumnya sudah diambil pada bagian code berikut :

DBDataSource dataSource;

//....

dataSource = new DBDataSource(this);
		dataSource.open();
		values = dataSource.getAllLokasi();

Setelah itu, ketika sampai pada MapsActivity.java, ArrayList lokasi yang diikutsertakan melalui intent akan langsung diparsing dan ditampilkan satu persatu pada peta menggunakan kode di bawah ini :

		//...
		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;
				}
			});
		}
		//..

Basically, that’s all! Sederhana sekali bukan?

Untuk source code MapsActivity.java kalian bisa lihat di bawah ini :

Sedangkan untuk full source code CheckInActivity.java, adalah sebagai berikut :

Demo

Pada saat aplikasi TWOH’s Maps dibuka akan muncul tampilan seperti berikut :

Tampilan Awal TWOH Maps v2

Langsung masuk ke halaman check-in, ada 6 lokasi di sana

Halaman Check-in pada TWOH’s Maps

Kemudian saat klik “Petakan semua lokasi” akan muncul point lokasi pada peta

Point lokasi pada peta

Klik marker, maka akan muncul details dari lokasi tersebut

Details lokasi

Source code lengkapnya bisa dilihat di GitHub saya, kalian juga bisa download demo app-nya pada Play Store.