Menampilkan Marker dan InfoWindow di Peta Menggunakan Android Maps API V2

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 :

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

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

lokasi langsung mengarah ke tempat marker berada

Marker menampilkan title dan snippet pada infowindow ketika diklik

Marker menampilkan title dan snippet pada infowindow ketika diklik

Peta Jepang emang keren ya :D

Marker pada Android Maps dengan citra 3D

Semoga bermanfaat 🙂



Download aplikasi kami di Google Play Store


22 Comments

  1. hilman May 4, 2014
    • Hafizh Herdi Naufal October 17, 2014
      • oleh October 23, 2016
  2. agungs May 8, 2014
  3. Iim Nur Diansyah July 2, 2014
    • Hafizh Herdi Naufal October 17, 2014
  4. feb October 23, 2014
  5. fauzi December 30, 2014
  6. wahyu January 1, 2015
    • Hafizh Herdi Naufal January 8, 2015
  7. atmieramen January 2, 2015
    • Hafizh Herdi Naufal January 8, 2015
  8. arif February 8, 2015
    • Hafizh Herdi Naufal February 10, 2015
      • arif February 13, 2015
  9. aryn March 19, 2015
    • Hafizh Herdi May 19, 2015
  10. aan April 7, 2015
  11. wakwaw May 19, 2015
    • Hafizh Herdi May 19, 2015
  12. Alfi November 7, 2015

Leave a Reply