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-androidJika baru mulai belajar android dianjurkan untuk membaca tutorial
Aplikasi Android Sederhana - Menghitung Luas Persegi PanjangSalam Hangat
Agus Haryanto
Ini kan long sama lat nya disetting manual ya, klo misalnya maw pake di handset biar langsung detect GPS otomatis apa yg diubah??
thx…
@raka, pada tutorial sebelumnya (“Pengenalan GPS”) sudah dibahas mendetect koordinat yang ditangkap GPS di HP android.
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.
terima kasih om, artikelnya sangat membantu 😀
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…
Nice Tutorial, Mas saya mo tanya bagaimana menggabungkan Google Maps diatas dengan GPS.
Makasih
@devit, buat saja dua activity, activity pertama untuk mendapatkan koordinat, setelah dapat koordinat panggil activity untuk menampilkan map
good tutorial, mas klo pengen buat aplikasi daftar seluruh tempat wisata se indonesia untuk skripsi kira2 bsa ga yah?
@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 🙂
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
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
makasih masbro
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..
@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 😀
@Admin, wah pertanyaan saya blm dijawab ne.. he2..
Tapi untung saya uda nemuin cara ny.. 😀
@Adrian, iya sama2 mas bro.. Saya jg lg belajar android.. 😀
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..
@Mas Adekdik, bisa minta coding buat tampilkan Poto sama Alamatnya ?
Terima Kasih
kalo bisa kirim ke astyaviasri@ymail.com
mas, saya mau tanya..
bagaimana cara mengambil data dari website terus dimana masukin codingannya..
mohon bantuannya dan terima kasih.. 🙂
mas cara gabungin tab menu ma peta’ gmana ya mas?
mohon bantuan’ mas, untuk tugas akhir nih,.
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…
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
saya sudah masukkan ke HTC Desire android 2.2, tapi kok tampilan petanya ga muncul, hanya markernya yang muncul…
itu kenapa ya????
terima kasih
@ Mas Adekdik : bagi ilmunya dong buat nampilkan alamat dan foto??thanks kalo mau berbagi 😉
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 ?
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…..
pak kalau overlay nya diklik manggil activity lain gimana pak?? saya coba pake intent tapi bingung ngeletakkannya dimana… mohon sarannya pak
@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
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
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);
@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,,,
mas kal gambarnya di klik ko force close ya ..
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);
mas, mau tanya,,,,kalo saya tambah tombol dial, biar beda2 no telp nya tiap marker gmn yah???
slm ..klw markerx pake 3 dimensi, file .max atau .skp kira2 gimana caranya Mas bro ???
Mhon penjelasannya
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
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
mas, mau tanya apakah bisa utk pencarian jarak nya menggunakan metode hillclimbing?