Menampilkan Marker dan InfoWindow di Peta Menggunakan Android Maps API V2

Last Updated on 11 years by Mas Herdi

Yo guys. Kali ini saya akan berbagi tentang bagaimana cara menambahkan marker dan menampilkannya pada peta menggunakan Android Maps API v2.

Apa itu marker? Marker pada Android Maps V2 berfungsi sebagai sebagai penanda titik lokasi (latitude dan longitude) pada peta. Tenang, caranya gampang sekali kok, saya bisa pasti kalian juga bisa. 😀

Pre-Requisites

Sebelum melakukan tutorial ini, kalian harus membaca beberapa postingan berikut :

• Tutorial Menampilkan Maps Menggunakan Android Maps API v2 dan MapFragment
• Menampilkan Lokasi Pengguna di Peta Menggunakan Android Maps API V2
• Kumpulan Tutorial Android Maps API V2

Di dalam postingan di atas, mungkin ada pre-requisites lagi yang harus kalian lakukan.

Menambahkan Marker pada Peta

Oke, setelah kalian berhasil melakukan tutorial-tutorial sebelumnya. Kita akan mencoba untuk menambahkan marker pada peta. Berbeda dengan Android Maps API v1 yang mempunyai cara yang lumayan rumit ketika ingin menampilkan marker di peta, Android Maps v2 mempunyai cara yang lebih mudah, dan sintaks-nya mirip dengan sintaks yang dipakai oleh Google Maps Javascript API.

Pertama-tama kita membuat tiga buah variable bertipe LatLng pada kelas MainActivity terlebih dahulu yang berisikan informasi latitude dan longitude tempat dimana marker akan diletakkan.

//..
private LatLng latLngBiru = new LatLng(35.6829733, 139.7321275);
private LatLng latLngKuning = new LatLng(35.6847009,139.7314891);
private LatLng latLngMerah = new LatLng(35.6839537, 139.7308615);
//..

Setelah itu kita tambahkan marker tersebut pada objek GoogleMap menggunakan kode di bawah ini. Tambahkan kode berikut pada method onCreate().

map.addMarker(new MarkerOptions()
		.position(latLngBiru)
		.icon(BitmapDescriptorFactory
		.defaultMarker(BitmapDescriptorFactory.HUE_BLUE))
		.title("tempat rahasia").snippet("rahasia lho"));

map.addMarker(new MarkerOptions()
		.position(latLngKuning)
		.icon(BitmapDescriptorFactory
		.defaultMarker(BitmapDescriptorFactory.HUE_YELLOW))
		.title("bangunan kampus").snippet("bangunan utama"));

map.addMarker(new MarkerOptions()
		.position(latLngMerah)
		.icon(BitmapDescriptorFactory
		.defaultMarker(BitmapDescriptorFactory.HUE_RED))
		.title("kantin kampus").snippet("makan makan"));

Ketika kita ingin menambahkan sebuah marker pada peta, kita harus mengikutsertakan sebuah objek MarkerOptions. Marker mempunyai beberapa properti yang bisa kita set, dan properti-properti itu ditampung dalam kelas MarkerOptions.

Pada kode di atas bisa dilihat properti yang saya set antara lain adalah position, icon, title dan snippet. Properti position wajib diset karena itu berisi informasi(lat, long) di mana marker tersebut harus diletakkan. Kemudian untuk marker icon saya mengambil default marker dari Android Maps API v2, dan mengeset warnanya sesuai jenis marker, merah, kuning dan biru.

Kemudian supaya pada saat aplikasi dibuka kita bisa langsung menuju ke tempat di mana marker tersebut berada, kita menggunakan kode di bawah ini.

map.animateCamera(CameraUpdateFactory.newLatLngZoom(latLngBiru, 17));

Kode berikut akan menganimasikan peta ke suatu posisi(lat, long) dan zoom tertentu yang bisa kita set.

Ketika sudah ditambahkan, maka kode MainActivity class milik kalian akan mirip dengan kode berikut :

public class MainActivity extends FragmentActivity {

	private GoogleMap map;

	private LatLng latLngBiru = new LatLng(35.6829733, 139.7321275);
	private LatLng latLngKuning = new LatLng(35.6847009,139.7314891);
	private LatLng latLngMerah = new LatLng(35.6839537, 139.7308615);

	@Override
	protected void onCreate(Bundle savedInstanceState) {
		super.onCreate(savedInstanceState);
		setContentView(R.layout.activity_maps_main);

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

		map.addMarker(new MarkerOptions()
				.position(latLngBiru)
				.icon(BitmapDescriptorFactory
						.defaultMarker(BitmapDescriptorFactory.HUE_BLUE))
				.title("tempat rahasia").snippet("rahasia lho"));
		map.addMarker(new MarkerOptions()
				.position(latLngKuning)
				.icon(BitmapDescriptorFactory
						.defaultMarker(BitmapDescriptorFactory.HUE_YELLOW))
				.title("bangunan kampus").snippet("bangunan utama"));
		map.addMarker(new MarkerOptions()
				.position(latLngMerah)
				.icon(BitmapDescriptorFactory
						.defaultMarker(BitmapDescriptorFactory.HUE_RED))
				.title("kantin kampus").snippet("makan makan"));

		map.animateCamera(CameraUpdateFactory.newLatLngZoom(latLngBiru, 17));
	}
}

Dan… inilah tampilan ketika aplikasi dijalankan 🙂

lokasi langsung mengarah ke tempat marker berada

Marker menampilkan title dan snippet pada infowindow ketika diklik

Marker pada Android Maps dengan citra 3D

Semoga bermanfaat 🙂