Belajar Android Membuat Marker dan Infowindow di google map

Jumpa lagi dengan Agus Haryanto diseri tutorial Android, 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 centang Constructors from superclass

01package com.agus;

02 

03import java.util.ArrayList;

04 

05import android.content.Context;

06import android.graphics.drawable.Drawable;

07 

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

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

10 

11public class MapsOverlay extends ItemizedOverlay {

12    private ArrayList mOverlays = new ArrayList();

13    private Context mContext ;

14    public MapsOverlay(Drawable defaultMarker) {

15        super(boundCenterBottom(defaultMarker));

16 

17        // TODO Auto-generated constructor stub

18    }

19    public MapsOverlay(Drawable defaultMarker, Context context) {

20          super(boundCenterBottom(defaultMarker));

21          mContext = context;

22    }

23    @Override

24    protected OverlayItem createItem(int i) {

25        // TODO Auto-generated method stub

26        return mOverlays.get(i);

27    }

28 

29    @Override

30    public int size() {

31        // TODO Auto-generated method stub

32        return mOverlays.size();

33 

34    }

35 

36    public void addOverlay(OverlayItem overlay) {

37        mOverlays.add(overlay);

38        populate();

39    }

40 

41}

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

1List mapOverlays = mapView.getOverlays();

2Drawable drawable = this.getResources().getDrawable(R.drawable.marker);

3MapsOverlay itemizedoverlay = new MapsOverlay(drawable, this);

4OverlayItem overlayitem = new OverlayItem(point, "Halo, Apa kabar!", "I'm in Jakarta!");

5itemizedoverlay.addOverlay(overlayitem);

6mapOverlays.add(itemizedoverlay);

sehingga code pada TampilkanMap.java adalah sebagai berikut

01package com.agus;

02 

03import java.util.List;

04 

05import com.google.android.maps.GeoPoint;

06import com.google.android.maps.MapActivity;

07import com.google.android.maps.MapView;

08import com.google.android.maps.Overlay;

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

10 

11import android.graphics.drawable.Drawable;

12import android.os.Bundle;

13 

14public class TampilkanMap extends MapActivity

15{

16    /** Called when the activity is first created. */

17    @Override

18    public void onCreate(Bundle savedInstanceState)

19    {

20        super.onCreate(savedInstanceState);

21        setContentView(R.layout.main);

22 

23        MapView mapView = (MapView) findViewById(R.id.mapView);

24        mapView.setBuiltInZoomControls(true);

25        double lat = -6.2532592788520005;

26        double lng = 106.853239291777;

27        GeoPoint point = new GeoPoint((int) (lat *1E6),(int) (lng * 1E6));

28        mapView.getController().animateTo(point);

29        mapView.getController().setZoom(15);

30        List mapOverlays = mapView.getOverlays();

31        Drawable drawable = this.getResources().getDrawable(R.drawable.marker);

32        MapsOverlay itemizedoverlay = new MapsOverlay(drawable, this);

33        OverlayItem overlayitem = new OverlayItem(point, "Halo, Apa Kabar!", "I'm in Jakarta!");

34        itemizedoverlay.addOverlay(overlayitem);

35        mapOverlays.add(itemizedoverlay);

36    }

37 

38    @Override

39    protected boolean isRouteDisplayed() {

40        return false;

41    }

42}

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

01@Override

02    protected boolean onTap(int index) {

03      OverlayItem item = mOverlays.get(index);

04      AlertDialog.Builder dialog = new AlertDialog.Builder(mContext);

05      dialog.setTitle(item.getTitle());

06      dialog.setMessage(item.getSnippet());

07      dialog.setPositiveButton("Close", new OnClickListener() {

08            @Override

09            public void onClick(DialogInterface arg0, int arg1) {

10                arg0.dismiss();

11            }

12        });

13      dialog.show();

14      return true;

15    }

Kode lengkap untuk MapsOverlay.java adalah :

01package com.agus;

02 

03import java.util.ArrayList;

04 

05import android.app.AlertDialog;

06import android.content.Context;

07import android.content.DialogInterface;

08import android.content.DialogInterface.OnClickListener;

09import android.graphics.drawable.Drawable;

10import android.widget.Toast;

11 

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

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

14 

15public class MapsOverlay extends ItemizedOverlay {

16    private ArrayList mOverlays = new ArrayList();

17    private Context mContext ;

18    public MapsOverlay(Drawable defaultMarker) {

19        super(boundCenterBottom(defaultMarker));

20 

21        // TODO Auto-generated constructor stub

22    }

23 

24    public MapsOverlay(Drawable defaultMarker, Context context) {

25        super(boundCenterBottom(defaultMarker));

26        mContext = context;

27    }

28    @Override

29    protected OverlayItem createItem(int i) {

30        // TODO Auto-generated method stub

31        return mOverlays.get(i);

32    }

33 

34    @Override

35    public int size() {

36        // TODO Auto-generated method stub

37        return mOverlays.size();

38 

39    }

40 

41    public void addOverlay(OverlayItem overlay) {

42        mOverlays.add(overlay);

43        populate();

44    }

45 

46    @Override

47    protected boolean onTap(int index) {

48      OverlayItem item = mOverlays.get(index);

49      AlertDialog.Builder dialog = new AlertDialog.Builder(mContext);

50      dialog.setTitle(item.getTitle());

51      dialog.setMessage(item.getSnippet());

52      dialog.setPositiveButton("Close", new OnClickListener() {

53            @Override

54            public void onClick(DialogInterface arg0, int arg1) {

55                arg0.dismiss();

56            }

57        });

58      dialog.show();

59      return true;

60    }

61 

62}

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)




1 lat = -6.2432592788520005;




2 lng = 106.853239291777;




3 point = new GeoPoint((int) (lat *1E6),(int) (lng * 1E6));




4 overlayitem = new OverlayItem(point, "Halo, Juga!", "Saya di jakarta juga!");




5 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.

Kita sudah bisa membuat menu diandroid, sudah bisa menangkap nilai kooordinat dari GPS

sudah bisa menggunakan Google Map diandroid ,dengan ini seharusnya kita sudah bisa membuat

aplikasi yang keren, misalnya kita buat aplikasi diandorid yang isinya

data universitas se Indonesia lengkap dengan mapnya.


Saat ini sedang ada festival dan kompetisi mobile application android ayo ikutan   


Referensi :

http://developer.android.com/

http://mobiforge.com/developing/story/using-google-maps-android


Jika baru mulai belajar android dianjurkan untuk membaca tutorial

 Aplikasi Android Sederhana - Menghitung Luas Persegi Panjang