Belajar Android - Membuat Marker dan Info Window di google map

0
3:03 AM
Pada tutorial sebelumnya kita telah mempelajari tentang Pengenalan Google Map di android,  selanjutnya kita akan mengobati rasa penasaran kita diakhir tutorial sebelumnya, sekarang mari kita belajar membuat marker dan infowindow di google map android.
Sebelum melangkah lebih jauh saya coba jelaskan definisi dari marker dan infowindow
Marker, kalau anda pernah pakai google map dan coba search suatu lokasi tentunya anda akan melihat tanda balon merah  kecil  pada map, nah itulah marker.  untuk marker selain gambar balon merah kecil, kita juga bisa menggunakan gambar lainnya, seperti misalnya untuk menandakan lokasi suatu toko, kita bisa gunakan gambar yang melambangkan toko.
Info Window, pada marker digoogle map cobalah and klik, maka akan mucul popup windoww kecil yang berisi informasi nama tempat tersebut dan alamatnya.  pada infowindow informasinya tidak harus nama dan alamat, tetapi juga bisa informasi lainnya.
Bagaimana sudah mengertikan apa itu marker dan infowindow ?
Sekarang kita kembali ke hobi kita coding. coding untuk membuat marker dan infowindow pada google map di android
1. Buka kembali project Belajar GoogleMap yang kita buat pada tutorial sebelumnya.
2. Siapkan gambar marker  yang akan kita gunakan, taruh filenya directory res/drawable, seperti telihat pada gambar dibawah
3. Buat Class baru dengan nama MapsOverlay dengan super class com.google.andorid.maps.ItemizedOverlay dan centangConstructors from superclass
package com.agus;

import java.util.ArrayList;

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

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

public class MapsOverlay extends ItemizedOverlay {
	private ArrayList mOverlays = new ArrayList();
	private Context mContext ;
	public MapsOverlay(Drawable defaultMarker) {
		super(boundCenterBottom(defaultMarker));

		// TODO Auto-generated constructor stub
	}
	public MapsOverlay(Drawable defaultMarker, Context context) {
		  super(boundCenterBottom(defaultMarker));
		  mContext = context;
	}
	@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();

	}

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

}

Pada class MapsOverlay inilah yang akan membantu menangani menggambar sesuatu diatas map.
4. Untuk menampilkan / menggambar marker dimap, buka kembali class TampilkanMap.java pada baris akhirnya tambahkan kode berikut
List mapOverlays = mapView.getOverlays();
Drawable drawable = this.getResources().getDrawable(R.drawable.marker);
MapsOverlay itemizedoverlay = new MapsOverlay(drawable, this);
OverlayItem overlayitem = new OverlayItem(point, "Halo, Apa kabar!", "I'm in Jakarta!");
itemizedoverlay.addOverlay(overlayitem);
mapOverlays.add(itemizedoverlay);
sehingga code pada TampilkanMap.java adalah sebagai berikut
package com.agus;

import java.util.List;

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

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

public class TampilkanMap extends MapActivity
{
    /** Called when the activity is first created. */
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.main);

        MapView mapView = (MapView) findViewById(R.id.mapView);
        mapView.setBuiltInZoomControls(true);
        double lat = -6.2532592788520005;
        double lng = 106.853239291777;
        GeoPoint point = new GeoPoint((int) (lat *1E6),(int) (lng * 1E6));
        mapView.getController().animateTo(point);
        mapView.getController().setZoom(15);
        List mapOverlays = mapView.getOverlays();
        Drawable drawable = this.getResources().getDrawable(R.drawable.marker);
        MapsOverlay itemizedoverlay = new MapsOverlay(drawable, this);
        OverlayItem overlayitem = new OverlayItem(point, "Halo, Apa Kabar!", "I'm in Jakarta!");
        itemizedoverlay.addOverlay(overlayitem);
        mapOverlays.add(itemizedoverlay);
    }

    @Override
    protected boolean isRouteDisplayed() {
        return false;
    }
}
Kemudian kita run project, hasilnya marker terlihat ada ditengah layar.
Marker sudah berhasil ditampilkan selanjutnya yang ingin kita buat adalah apabila marker diklik maka akan muncul info window yang berisi informasi dari marker tersebut.
5. Buka kembali class MapsOverlay.java, tambahkan satu method untuk menangkap marker yang diklik dan menampilkan informasi dari marker tersebut dalam bentuk dialog window
@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.setPositiveButton("Close", new OnClickListener() {
			@Override
			public void onClick(DialogInterface arg0, int arg1) {
				arg0.dismiss();
			}
	    });
	  dialog.show();
	  return true;
	}
Kode lengkap untuk MapsOverlay.java adalah :
package com.agus;

import java.util.ArrayList;

import android.app.AlertDialog;
import android.content.Context;
import android.content.DialogInterface;
import android.content.DialogInterface.OnClickListener;
import android.graphics.drawable.Drawable;
import android.widget.Toast;

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

public class MapsOverlay extends ItemizedOverlay {
	private ArrayList mOverlays = new ArrayList();
	private Context mContext ;
	public MapsOverlay(Drawable defaultMarker) {
		super(boundCenterBottom(defaultMarker));

		// TODO Auto-generated constructor stub
	}

	public MapsOverlay(Drawable defaultMarker, Context context) {
		super(boundCenterBottom(defaultMarker));
		mContext = context;
	}
	@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();

	}

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

	@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.setPositiveButton("Close", new OnClickListener() {
			@Override
			public void onClick(DialogInterface arg0, int arg1) {
				arg0.dismiss();
			}
	    });
	  dialog.show();
	  return true;
	}

}
Mari kita run lagi projectnya dan klik markernya,maka akan muncul infowindownya
Mudahkan membuat marker dengan infowindownya digoogle map. Contoh diataskan cuma satu marker, bagaiaman juga kita ingin menambah marker yang tampil. Tenang kode yang kita buat diatas sudah support untuk itu. Buka kembali class TampilkanMap.java sebelum code mapOverlays.add(itemizedoverlay); tambahkan code ini (koordinat baru yang akan diberi marker)
lat = -6.2432592788520005;
lng = 106.853239291777;
point = new GeoPoint((int) (lat *1E6),(int) (lng * 1E6));
overlayitem = new OverlayItem(point, "Halo, Juga!", "Saya di jakarta juga!");
itemizedoverlay.addOverlay(overlayitem);
Kalau kita run project kita hasilnya

Setelah belajar tutorial ini diharapkan para pembaca dapat membuat aplikasi android yang memanfaatkan GPS dan Google Map.

About the author

Hanya Pecinta Seni ~
Tukang kode ~

0 komentar:

Subscribe to: Post Comments (Atom)