Menampilkan InfoWindow pada MapView Android

Last Updated on 7 years by Mas Herdi

Pada postingan ini saya akan mendemonstrasikan cara penggunaan Info Window pada Android Maps, InfoWindow pada dasarnya merupakan sebuah Overlay Item yang keluar saat kita mengeklik marker pada Android Maps, sama seperti jendela informasi yang akan keluar ketika kita mengeklik suatu marker pada Google Maps. Dan implementasinya pada Android Maps akan menjadi sedikit berbeda.

Pertama-tama, pastikan kalian telah berhasil menjalankan tutorial menampilkan Android Maps menggunakan MapView berikut. Oke, buka kembali project-nya, kita akan melakukan sedikit modifikasi.

Kita akan membuat class MapOverlay yang mengimplementasikan kelas ItemizedOverlay, kelas itu nantinya akan digunakan untuk membuat daftar marker dan menampilkan overlay.

MapOverlay.java

package org.example.mymap;

import java.util.ArrayList;

import android.app.AlertDialog;
import android.content.Context;
import android.graphics.drawable.Drawable;

import com.google.android.maps.ItemizedOverlay;
import com.google.android.maps.OverlayItem;

@SuppressWarnings("rawtypes")
public class MapOverlay extends ItemizedOverlay {

	private ArrayList<OverlayItem> mOverlays = new ArrayList<OverlayItem>();
	Context mContext;
	public MapOverlay(Drawable defaultMarker, Context context) {
		super(boundCenterBottom(defaultMarker));
		// TODO Auto-generated constructor stub
		mContext = context;
	}

	public void addOverlay(OverlayItem overlay)
	{
		mOverlays.add(overlay);
		populate();
	}

	@Override
	protected OverlayItem createItem(int i) {
		// TODO Auto-generated method stub
		return mOverlays.get(i);

	}

	@Override
	public int size() {
		// TODO Auto-generated method stub
		return mOverlays.size();
	}

	@Override
	protected boolean onTap(int index) {
	  OverlayItem item = mOverlays.get(index);
	  AlertDialog.Builder dialog = new AlertDialog.Builder(mContext);
	  dialog.setTitle(item.getTitle());
	  dialog.setMessage(item.getSnippet());
	  dialog.show();
	  return true;
	}

}

Ada beberapa method yang akan kita override, di antaranya :

• OverlayItem createItem(int i)
  Berfungsi untuk membuat Item yang akan dikembalikan untuk digunakan pada saat method ini dipanggil.
• int size()
  Berfungsi untuk mengembalikan ukuran dari class MapOverlay.
• boolean onTap(int index)
  Berfungsi untuk mendefinisikan event apa yang akan terjadi ketika marker tersebut ditap/diklik

Kemudian, pada Main class kita modifikasi kodenya seperti berikut ini :

TestMapActivity.java

import java.util.List;

import android.graphics.drawable.Drawable;
import android.os.Bundle;

import com.google.android.maps.GeoPoint;
import com.google.android.maps.MapActivity;
import com.google.android.maps.MapController;
import com.google.android.maps.MapView;
import com.google.android.maps.Overlay;
import com.google.android.maps.OverlayItem;

public class TestMapActivity extends MapActivity {
   private MapView map;
   private MapController controller;

   @Override
   public void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.main);
      initMapView();
      initMyLocation();
   }

   /** Menemukan dan menginisialisasi MapView. */
   private void initMapView() {
      map = (MapView) findViewById(R.id.map);
      controller = map.getController();
      map.setSatellite(true);
      map.setBuiltInZoomControls(true);

   }

   /** Tracking lokasi awal pada map. */
   private void initMyLocation() {
	  int lat, lng;
      lat = (int)(35.683183*1E6);
      lng = (int)(139.732435*1E6);

      GeoPoint point = new GeoPoint(lat,lng);

      List<Overlay> mapOverlays = map.getOverlays();
	  Drawable marker = this.getResources().getDrawable(R.drawable.marker);
	  MapOverlay itemizedOverlay = new MapOverlay(marker, this);

	  OverlayItem overlayitem = new OverlayItem(point, "Sophia University!", "My Next Destination \o/");
      itemizedOverlay.addOverlay(overlayitem);
      controller.setZoom(16);
      controller.animateTo(point);

      mapOverlays.add(itemizedOverlay);
   }

   @Override
   protected boolean isRouteDisplayed() {
      // Required by MapActivity
      return false;
   }
}

Pada dasarnya, kelas di atas berfungsi untuk membuat sebuah array List<Overlay>, yang berisi item-item(marker) yang nantinya item tersebut mempunyai koordinat dan infonya sendiri-sendiri. Dan setiap item tersebut akan ditambahkan kepada kelas ItemizedOverlay yang telah kita buat, setelah itu kumpulan dari item yang ada pada ItemizedOverlay, kita tambahkan ke daftar List<Overlay> untuk ditampilkan.

GeoPoint digunakan untuk menampilkan koordinat yang berbasis microdegrees (degrees * 1e6), namun karena koordinat biasanya berformat double, maka sebelumnya harus kita konversi dahulu dengan cara mengkalikannya dengan 1E6.

MapView

InfoWindow yang muncul

That’s all, kalau ada yang kurang jelas atau error, jangan sungkan untuk bertanya di bagian komentar.