Menambahkan Marker pada Google Map di Android


Sebagai lanjutan dari post sebelumnya yaitu Membuat Aplikasi Google Map Kita Sendiri. Di sini akan dilanjutkan membuat tutorial tentang menambahkan marker dan mencoba dialog. Langsung aja deh😉

Sebelumnya siapkan eclipse dan emulatornya.

Tambahkan file CustomItemizedOverlay.java pada package com.iddev.googlemap :

package com.iddev.googlemap;

import java.util.ArrayList;

import android.graphics.drawable.Drawable;

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

public class CustomItemizedOverlay extends ItemizedOverlay {
	private ArrayList<OverlayItem> mOverlays = new ArrayList<OverlayItem>();
	private MainActivity mainActivity;

	public CustomItemizedOverlay(Drawable defaultMarker) {
		super(boundCenterBottom(defaultMarker));
	}
	
	public CustomItemizedOverlay(Drawable defaultMarker, MainActivity mainActivity) {
		super(boundCenterBottom(defaultMarker));
		this.mainActivity = mainActivity;
	}

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

	@Override
	protected OverlayItem createItem(int i) {
		return mOverlays.get(i);
	}

	@Override
	public int size() {
		return mOverlays.size();
	}

	@Override
	protected boolean onTap(int index) {
		OverlayItem item = mOverlays.get(index);
		
		return true;
	}
}

Jika sudah, sekarang kita unduh dulu markernya dari sini. Kemudian extract dan masukan salah satu saja, misalnya bank.png. Cukup copy-paste ke dalam folder drawable yang ada di dalam folder res.

marker bank

marker bank

Oke, sekarang kita tambahkan beberapa coding sehingga pada MainActivity.java berubah menjadi seperti ini :

package com.iddev.googlemap;

import java.util.List;

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;

import android.content.Intent;
import android.graphics.drawable.Drawable;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuInflater;
import android.view.MenuItem;
import android.view.Window;

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

		mapView = (MapView) findViewById(R.id.mapview);
		mapView.setBuiltInZoomControls(true);
		
		// set posisi tengah dari map
		MapController mapController = mapView.getController();
		mapController.setCenter(new GeoPoint(-7298115, 112739451));
		mapController.setZoom(12);
		
		List<Overlay> mapOverlays = mapView.getOverlays();
		Drawable drawable = this.getResources().getDrawable(R.drawable.bank);
		CustomItemizedOverlay itemizedoverlay = new CustomItemizedOverlay(drawable);
		GeoPoint point = new GeoPoint(-7298115, 112739451);
		OverlayItem overlayitem = new OverlayItem(point, "Ini adalah Judul", "Ini adalah keterangan");
		itemizedoverlay.addOverlay(overlayitem);
		mapOverlays.add(itemizedoverlay);
    }
    
    @Override
    protected boolean isRouteDisplayed() {
        return false;
    }
}

Sekarang kita jalankan dengan emulatornya.

hasil akhir

hasil akhir

Sudah jadi kan🙂

Sekarang akan saya jelaskan maksud dari coding di atas untuk penambahan marker.

List<Overlay> mapOverlays = mapView.getOverlays();

Digunakan untuk mengambil seluruh overlay yang ada pada google map. Apaan sih overlay itu ? Overlay itu semacam layer atau tumpukan di atas peta google map. Overlay bisa berbagai macam jenis, antara lain polyline, polygon, marker.

Drawable drawable = this.getResources().getDrawable(R.drawable.bank);

Kode ini digunakan untuk mengubah alamat pointer dari file bank.png menjadi tipe drawable. Karena tipe drawable merupakan class yang bisa digambar di aplikasi. Intinya me-load file tersebut.

CustomItemizedOverlay itemizedoverlay = new CustomItemizedOverlay(drawable);

melakukan inisialisasi itemizedOverlay, di sini gambar bank tadi dimasukkan ke dalam objek CustomItemizedOverlay yang kita buat. Class CustomItemizedOverlay digunakan agar objek dapat masuk ke dalam overlay-nya google map.

GeoPoint point = new GeoPoint(-7298115, 112739451);

Nah, kalo ini sudah pasti kita tahu kalau ini menentukan posisi dari marker untuk berada di Surabaya.🙂

OverlayItem overlayitem = new OverlayItem(point, “Ini adalah Judul”, “Ini adalah keterangan”);

Kalo ini mendefinisikan bahwa variabel point tadi dimasukkan ke dalam overlayitem, sehingga isi dari overlay item adalah lokasi, judul, dan keterangan.

itemizedoverlay.addOverlay(overlayitem);

Ini apaan sih ? nggak, kita cuma memasukkan overlayitem ke dalam itemizedoverlay. Jadi yang awalnya itemizedoverlay cuma memiliki marker di dalamnya, kini memiliki koordinat lintang dan bujur (longitude & latitude).

mapOverlays.add(itemizedoverlay);

Nah, ini yang penting. itemizedoverlay merupakan sebuah marker, jadi kalo ingin memasukkan ke dalam google map, tinggal menambahkannya ke dalam mapOverlay.

4 thoughts on “Menambahkan Marker pada Google Map di Android

    • kode ini untuk membuat marker baru.

      List mapOverlays = mapView.getOverlays();
      Drawable drawable = this.getResources().getDrawable(R.drawable.bank);
      CustomItemizedOverlay itemizedoverlay = new CustomItemizedOverlay(drawable);
      GeoPoint point = new GeoPoint(-7298115, 112739451);
      OverlayItem overlayitem = new OverlayItem(point, “Ini adalah Judul”, “Ini adalah keterangan”);
      itemizedoverlay.addOverlay(overlayitem);
      mapOverlays.add(itemizedoverlay);

      kalo kita jadikan fungsi akan lebih baik.

      public void tambahMarker(GeoPoint point, String judul, String keterangan){
      List mapOverlays = mapView.getOverlays();
      Drawable drawable = this.getResources().getDrawable(R.drawable.bank);
      CustomItemizedOverlay itemizedoverlay = new CustomItemizedOverlay(drawable);
      OverlayItem overlayitem = new OverlayItem(point, judul, keterangan);
      itemizedoverlay.addOverlay(overlayitem);
      mapOverlays.add(itemizedoverlay);
      }

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s