About Me

Agus Haryanto,
Android Trainner,
GoogleMaps (JavaScript) Trainer
JQuery and JQuery Mobile Trainer
Java, Java Script and PHP Trainer
Freelance Developer Android
Freelance Developer Blackberry
Freelance Developer Web (GIS Googlemaps)
Freelance Developer SMS Gateway

jika ingin contact saya bisa emali ke agus.superwriter@gmail.com

ym: agus_h23

Pin BB : 2AD38B33

Facebook : Agus Haryanto


Article

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

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<OverlayItem> mOverlays = new ArrayList<OverlayItem>();
	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<Overlay> 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<Overlay> 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<OverlayItem> mOverlays = new ArrayList<OverlayItem>();
	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.
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

Salam Hangat
Agus Haryanto

Share

43 comments to Belajar Android Membuat Marker dan Infowindow di google map

  • raka

    Ini kan long sama lat nya disetting manual ya, klo misalnya maw pake di handset biar langsung detect GPS otomatis apa yg diubah??
    thx…

  • admin

    @raka, pada tutorial sebelumnya (“Pengenalan GPS”) sudah dibahas mendetect koordinat yang ditangkap GPS di HP android.

  • satria

    mas apakah dimungkinkan untuk mendapatkan data jarak dari google maps ?
    saya sedang membuat skripsi tentang mencari shortest path dengan menggunakan google maps pada android dengan menggunakan metode heuristic. (antco)
    terima kasih mas.

  • iaMz

    terima kasih om, artikelnya sangat membantu :D

  • Lia

    Om, bisa gak infowindownya link ke aktivitas (class) lain ?
    Makasih

  • Newbiiee..,,Mas Minta tolong, maun nanya tentang Search Map pada Android….

  • nyambung yang diatas…Bagaimana cara membuat search map pada Android…setelah markernya jadi, saya ingin menambahkan fasilitas search…Tolong bantuanya Mas…

  • Devit

    Nice Tutorial, Mas saya mo tanya bagaimana menggabungkan Google Maps diatas dengan GPS.
    Makasih

  • Agus Haryanto

    @devit, buat saja dua activity, activity pertama untuk mendapatkan koordinat, setelah dapat koordinat panggil activity untuk menampilkan map

  • ferdian

    good tutorial, mas klo pengen buat aplikasi daftar seluruh tempat wisata se indonesia untuk skripsi kira2 bsa ga yah?

  • Agus Haryanto

    @fedian, harusnya sih bisa, tinggal mas ferdian bikin proposal skripsinya yang bagus, lebih bagus lagi, kalau tidak hanya tempatnya tetapi tambahkan info fasilitas-fasilitas pendukung tempat wisata tersebut. kalau ini bisa jadi, bisa sangat berguna nih, bisa turut andil dalam memajukan paiwisata indonesia :)

  • Don

    Original:
    @devit, buat saja dua activity, activity pertama untuk mendapatkan koordinat, setelah dapat koordinat panggil activity untuk menampilkan map

    terus mas gimana codingnya? terus gimana juga cara masukin value tiap2 variabelnya.. Terima kasih

  • Faris

    up lagi punya satria, untuk jarak terdekatnya, kira2 gimana ya mas?
    sama mau tanya, gimana caranya buat nambahin tombol buat posisi kita?jadi walaupun bolak-balik ke lokasi lain, begitu klik langsung kembali ke posisi kita?terima kasih

  • sunix

    makasih masbro

  • Adrian

    Mas saya mau tanya, dengan liat coding ini

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

    nah untuk memberi enter untuk yang “Saya di jakarta juga!” codingnya seperti apa ya mas, saya ubek2 di tempat lain gak ketemu2 soalnya, makasih sebelumnya!

    Adrian

  • Mas kalo kita klik marker nya trus keluar context menu gimana tu?
    Kemudian kalo di klik salah satu context menu nya ada action nya, dan untuk tiap marker beda2..
    Misalnya ada 2 marker yang menunjukan 2 SPBU, kalo di klik marker ke satu, kelua menu misalnya :
    “Tampilkan alamat”
    “Tampilkan foto”
    Kalo di klik yang Tampilkan foto, keluar foto nya.
    Seperti itu misalnya. Mohon bantuannya mas.. he2..

    @Adrian, kalo mau nambah in Enter/New Line berikan saja string “\n”. Misalnya agar tampilannya:
    “Saya di
    jakarta juga!”
    maka syntak nya
    overlayitem = new OverlayItem(point, “Halo, Juga!”, “Saya di\njakarta juga!”);
    He2..

  • Adrian

    @Adekdik
    Terima kasih buat jawabannya, bener2 sangat membantu nih.
    Kalau untuk melakukan pembatasan untuk map bagaimana ya? Logikanya hanya map yang berlokasi di Jakarta (misal) yang ditampilkan.

    Sekali lagi makasih buat jawabnnya, sangat membantu :D

  • @Admin, wah pertanyaan saya blm dijawab ne.. he2..
    Tapi untung saya uda nemuin cara ny.. :D

    @Adrian, iya sama2 mas bro.. Saya jg lg belajar android.. :D
    O kalo untuk pembatasan kayaknya perlu maen2 ama zoom ing nya. Soalnya peta nya google kan seluruh dunia, jadi tidak ada pembatasan. Jadi menurut saya, kalo petanya di batasi tampilannya saja, kita set zoom nya dengan nilai tertentu..
    Mungkin berdasarkan latitude ama longitude nya juga ada caranya, tp saya belum tau..
    he2..

  • Asri

    @Mas Adekdik, bisa minta coding buat tampilkan Poto sama Alamatnya ?
    Terima Kasih

  • mas, saya mau tanya..
    bagaimana cara mengambil data dari website terus dimana masukin codingannya..
    mohon bantuannya dan terima kasih.. :)

  • purnama

    mas cara gabungin tab menu ma peta’ gmana ya mas?
    mohon bantuan’ mas, untuk tugas akhir nih,.

  • newDroids

    mas,, mau tanya.. kalau gambarnya di ganti bisa tidak?
    gambarnya buukan dari R.drawable.gambar
    tp dari website,, jadi kita ada url gambar website,,tinggal kita masukin ke situ aja gambarnya.
    kira-kira bisa tidak?

  • wah mntep nie mass..
    mas mw tnya nie klo msalnya mw nampilin kta2 di atas gambar markernya gmna ya..???
    mohon bntuannya mas..
    aq bru blajar android nie…

  • luthfihariz

    mantap tutorial androidnya mas agus, saya udah ikuti dari yg paling basic.

    saya jg mau tanya nih
    maksud dari kode yang ini apa yah ?
    mContext = context;
    trus variabel ‘context’ itu dapet darimana ?

    terima kasih banyak mas

  • haidir

    saya sudah masukkan ke HTC Desire android 2.2, tapi kok tampilan petanya ga muncul, hanya markernya yang muncul…

    itu kenapa ya????

    terima kasih

  • dian

    @ Mas Adekdik : bagi ilmunya dong buat nampilkan alamat dan foto??thanks kalo mau berbagi ;)

  • sun

    hai mas agus,

    ini tutorial yang sangat bagus, sangat membantu saya sebagai pemula. saya sudah mempraktekan sesuai dengan tutorial di atas. tidak terdapat kode yang yang error. namaun setelah saya jalankan di emulator. keluar pesan “Force Close”.
    mungkin ada tanggapan untuk jalan keluar ?

  • pradipta

    mas mau tnya nih…., kl marker ud muncul tapi map/peta’a g muncul2 masalah’a dmn ya ???
    mohon bantuan’a mas…., saya mse newbe alna…..

  • faqih

    pak kalau overlay nya diklik manggil activity lain gimana pak?? saya coba pake intent tapi bingung ngeletakkannya dimana… mohon sarannya pak

  • fuad

    @pradipta
    sama dengan masalh dengan saya, pertama kita harus tau dulu key api untuk android kita selama kita tidak mendapat key api kita tidak bisa mengakses api android untuk mendapatkan key bisa di liat di sini:
    http://ryandzhunter.wordpress.com/2011/10/20/cara-mendapatkan-api-key-android-sdk/

    setelah itu baru di manifeast.xml nya dibuat

  • tirta

    Koreksi sedikit mas untuk bagian ini, setelah saya compile masih terjadi error..

    dialog.setPositiveButton(“Close”, new OnClickListener() {
    @Override
    public void onClick(DialogInterface arg0, int arg1) {
    arg0.dismiss();
    }
    });

    Setelah saya utak-utik seharusnya

    dialog.setPositiveButton(“Close”, new DialogInterface.OnClickListener() {

    public void onClick(DialogInterface arg0, int arg1) {
    arg0.dismiss();
    }
    });

    Terimakasih mas tutorialnya sudah cukup membantu

  • dimz

    mas mau tanya, knp pada bagian
    @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;
    }

    }

    arg0.dismiss()nya saya mau ganti intent supaya ke class lain, knp tidak bisa yah??

  • oke solved masalahnya,,,,ane udah bisa intent nya,,,sekedar berbagi info, kalo tombol close nya mau pindah ke class lain caranya :

    ganti arg0.dismiss(); sama

    Intent intent = new Intent(mContext, class yang dituju.class);
    intent.setFlags(Intent.FLAG_ACTIVITY_CLEAR_TOP);
    mContext.startActivity(intent);

  • Agus Haryanto

    @dimz, mantap, buat yang lain juga boleh berbagi solusi disini.

  • mas saya mau tanya juga, kalo setiap marker gambarnya beda2 gmn yah caranya,,,kaya yg LBS rumah makan padang gitu,,,

  • Luqman Hakim Nurus

    mas kal gambarnya di klik ko force close ya ..

  • Luqman Hakim Nurus

    mas kalo buat 3 marker
    codingan yang ini harus ditambah apa ?
    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);

  • dimz

    mas, mau tanya,,,,kalo saya tambah tombol dial, biar beda2 no telp nya tiap marker gmn yah???

  • Butem

    slm ..klw markerx pake 3 dimensi, file .max atau .skp kira2 gimana caranya Mas bro ???
    Mhon penjelasannya

  • gama

    mas agus saya mau nanya nih.. kalo misalnya mau bikin button baru untuk nambah lokasi gimana ya ? kalo ini kan markernya di set pas di coding

    kalo coding untuk nambah marker tersendiri gmn ya?
    mohon pencerahannya

  • gama

    mas agus.. ini kan saya udah bikin map dari tutorial mas yang ada info windownya.. programnya jalan dengan marker dan lokasi yang sudah di tentukan.. gimana caranya supaya dari map info window ditambahkan dengan GPS dari lokasi kita.. mohon pencerahannya

  • jaya

    mas, mau tanya apakah bisa utk pencarian jarak nya menggunakan metode hillclimbing?

Leave a Reply

 

 

 

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Spam protection by WP Captcha-Free