Pada artikel kali ini saya akan menjelaskan tutorial Google Maps tentang bagamana cara menampilkan multimarker di Google Maps. Marker yang dimuncul akan ditampilkan dengan ikon yang berbeda-beda sesuai dengan kategori atau kriteria lokasi tersebut.
Markercluster
Selain itu juga kita akan menambahkan fitur Marker Cluster pada peta. Markercluster adalah sebuah fitur dimana marker yang tampil pada peta akan dikelompokan saat mencapai jumlah tertentu, hal ini dimaksudkan agar marker yang muncul tidak akan terlalu menumpuk di peta.
Caranya adalah dengan menampung semua marker yang akan kita tampilkan kedalam sebuah array dengan menggunakan looping lalu kita gunakan fungsi dari MarkerCluster tersebut.
Pertama kita membutuhkan library yang dibutuhkan untuk menampilkan markercluster di Google Maps. Kamu bisa menggunakan library dari mahnunchik. Ini adalah library markercluster yang dibangun untuk Google Maps versi 3.
Selain itu kamu juga dapat menggunakan library yang sudah saya taruh di source code yang bisa kamu unduh di akhir artikel ini.
Infowindow
Selain Markercluster, kita juga akan menggunakan fitur Infowindow untuk menampilkan informasi yang ada di marker tersebut ketika user mengklik marker tersebut di peta.
Perlu diketahui bahwa cara ini menggunakan PHP dan MySQL untuk menggunakan fitur yang sudah kita bahas sebelumnya.
Contoh kasus ini bisa kita gunakan jika kita ingin menampilkan multimarker di Google Maps dengan jumlah yang sanat banyak.
Sekarang kita buka text editor dan ketikkan script seperti ini
<html>
<head>
<title></title>
<script src="https://maps.google.com/maps/api/js?sensor=false" type="text/javascript"></script>
<script src="assets/js/jquery.js" type="text/javascript"></script>
<script src="assets/js/markerclusterer_packed.js" type="text/javascript"></script>
<script type="text/javascript">
var peta;
var nama = new Array();
var kategori = new Array();
var alamat = new Array();
var x = new Array();
var y = new Array();
var i;
var url;
var gambar_tanda;
function peta_awal() {
var purwakarta = new google.maps.LatLng(-6.538174427323609,
107.44945527392576);
var myStyles = [{
featureType: "point",
elementType: "labels",
stylers: [{
visibility: "off"
}]
}];
var petaoption = {
zoom: 11,
center: purwakarta,
mapTypeId: google.maps.MapTypeId.ROADMAP,
styles: myStyles
};
peta = new google.maps.Map(document.getElementById("map_canvas"),
petaoption);
ambildatabase();
}
function ambildatabase() {
var markers = [];
var info = [];
<?php
$link = mysql_connect('localhost', 'root', '');
mysql_select_db('googlemaps_multiicon', $link);
$query = mysql_query(
"SELECT `a`.*,`b`.* FROM `lokasi` AS `a` LEFT JOIN `kategori` AS `b` ON `a`.`kategori` = `b`.`id`");
$i = 0;
$js = '';
while ($value = mysql_fetch_assoc($query)) {
$js. = 'nama['.$i.
'] = "'.$value['nama'].
'";
kategori['.$i.'] = "'.$value['nama_kategori'].'";
alamat['.$i.'] = "'.$value['alamat'].'";
x['.$i.'] = "'.$value['latittude'].'";
y['.$i.'] = "'.$value['longitude'].'";
set_icon("'.$value['ikon'].'"); // kita set dulu koordinat markernya
var point = new google.maps.LatLng(parseFloat(x['.$i.']), parseFloat(y['.$i.']));
var contentString = "<table>" + "<tr>" + "<td><b>" + nama['.$i.'] + "</b></td>" + "</tr>" + "<tr>" + "<td>" +
alamat['.$i.'] + "</td>" + "</tr>" + "</table>";
var infowindow = new google.maps.InfoWindow({
content: contentString
});
tanda = new google.maps.Marker({
position: point,
map: peta,
icon: gambar_tanda,
clickable: true
});
markers.push(tanda);
info.push(infowindow);
google.maps.event.addListener(markers['.$i.'], "click", function () {
info['.$i.'].open(peta, markers['.$i.']);
});
';
$i++;
}
echo $js;
?>
var markerCluster = new MarkerClusterer(peta, markers);
}
function set_icon(ikon) {
if (ikon == "") {
} else {
gambar_tanda = "assets/icon/" + ikon;
}
}
</script>
</head>
<body>
<h3>GOOGLEMAPS MULTI ICON</h3>
<div id="map_canvas" style="width: 100%; height: 550px;"></div>
</body>
</html>
PERHATIAN : Script diatas menggunakan versi Google Maps lama dan belum mengikuti kebijakan baru dari Google Maps.
Dari script diatas, output yang dihasilkan akan seperti dibawah ini
Output diatas menampilkan beberapa marker yang kita ambil dari database MySQL. Didalam tabel tersebut setiap lokasi memiliki gambar ikon yang berbeda sesuai dengan kriteria atau kategori lokasi tersebut.
Setelah mengetahui kategori ikon dari marker, kita tinggal mengambil data gambar ikon yang sudah kita taruh yang memiliki nama yang sesuai dengan kategori tersebut.
Mudah kan ? Sekian dulu tutorial Google Maps dari saya tentang bagaimana cara menampilkan Multimarker di Google Maps.
Silahkan download full source-nya disini. Selamat mencoba dan semoga bermanfaat 😀
mas, bisa tolong dijelaskan tidak? maksudnya a dan b di syntax koneksi database di atas apa ya?
yg ini lho mas :
$query = mysql_query(“SELECT `a`.*,`b`.* FROM `lokasi` AS `a` LEFT JOIN `kategori` AS `b` ON `a`.`kategori` = `b`.`id`”);
$i = 0;
terimakasih
oh itu….itu fungsi ALIAS dalam query SQL, biasanya ini dipake kalo lagi mau menggabungkan data dari dua table atau lebih…sebenernya `a` atau `b` bisa diganti..bebas aja…bisa `table_a` atau `table_b`.
ini berfungsi untuk menghindari nama kolom yang sama di table yang berbeda…misalkan kolom id di table pertama dengan id di table ke dua…jadi ini perlu dipake supaya script SQLnya ga bingung..maka dipake lah kaya gini a.id dan b.id….
sama seperti kasus diatas :
SELECT `a`.*,`b`.* FROM `lokasi` AS `a` LEFT JOIN `kategori` AS `b` ON `a`.`kategori` = `b`.`id`table lokasi sebagai `a` dan table `kategori` sebagai `b`…
mudah-mudahan bisa difahami 🙂
mas saya kan coba ganti nama tabel dari database yang saya buat sendiri misalnya * FROM lokasi AS a saya ganti * FROM tempat AS a, dan pengaturan kolom tabelx sudah saya rubah sesuai tabel yg saya buat. tapi petax kenapa kok gak muncul ya mas ngeblank gtu, padahal itu kan fungsix hanya untuk munculkan marker saja.
mas…kalo mau masukin link di info windowsnya bisa gak mas ? soalnya dah ane coba pake tag a href … malah mapnya gk mau nongol ?
apa penempatan single / double quote nya udah bener mas? biasanya sich disitu…kalau ga berhasil juga mungkin harus diconvert dulu ke html object, misalkan pake gini $(variable).html()
single double di struktur database mas ?
maaf mas…saya agak kurang ngerti …. rencananya saya mau nyoba buat semacam pemetaan wisata jadi info windowsnya berisi info mengenai t4 wisata tp untuk lebih lengkapnya mau saya kasih link sehingga bisa buka halaman baru …. sampai saat ini saya coba masih error 😀
makasih sebelumnya mas ^^
bukan mas..penggunaan quote di javascriptnya
Pagi mas mohon bantuannya… bagimana caranya membuat multi icon yang bisa di seleksi menggunakan GET pada keluarannya hanya satu icon tergantung kategori yang kita pilih fleksibel.. misalnya saya pilih kategori wisata maka icon wisata yang hanya tampil dan misalnya lagi saya pilih mesjid maka icon mesjid aja yang tampil. misalnya WHERE ikon=’$_GET[ikon]’
halo mas wibowo, kalau untuk langsung di akses lewat $_GET kayaknya ga bisa karena Google Maps ini berjalan pake AJAX, btw untuk multi ikon yg dinamis itu ada diartikel sebelumnya. silahkan di explore ya mas 😀
terima kasih pak, artikel ini membantu saya…
boleh saya tanya, jika dua kategori berbeda dengan satu titik yang sama untuk menampilkan ikon nya gimana ya pak?? saya sudah coba, tapi hasilnya cuma berbentuk cluster pak…
ada solusi pak, biar muncul ikon yg berbeda tersebut??
Sebelumnya terima kasih ya mas atas kunjungannya, semoga jadi manfaat 🙂
sebenarnya itu adalah kekurangan dari Google Maps, sampai sekarang saya juga belum ada solusinya. Akhirnya mentok-mentok saya ganti engine map ke LeafletJS dengan API Maps menggunakan Open Street Map.
ada tutorial pak map LeafletJS dengan API Maps menggunakan Open Street Map.?? yang sama dengan kasus diatas??
kalo boleh send source code via email pak… makasih
kalau mau diberikan select deselect combo boc untuk menampilkan marker sesuai keinginan giman gan ?
Assalamualaikum mas
terima kasih untuk tutorialnya mas sangat bermanfaat
tapi boleh bertanya mas
saya diaplikasi ini mencoba memasukkan data lebih dari 130 data di mysql tapi kok malah tidak keluar petanya ya mas, kalau 120 an masih bisa keluar saat saya tambah jadi sekitar 130 ke atas malah petanya tidak keluar
apa ada batasan database lokasinya?
apabila dibatasi apakah bisa di atur batasannya?
dan bagaimana caranya?
Mohon bantuannya mas,
Terima Kasih
hmmm…coba diubah mas timeout excecution script atau memory-nya juga. atau bisa jadi ada koordinat yang salah format (ada spasi atau salah koma atau titik)
MarkerClusterer images di markerclusterer_packed.js sudah not found mas, jd dulu yg misal daerah yg dekat” bisa muncul jumlah cluster dengan warna biru atau kuning skrg malah gk muncul mas, apa ada masukan mas??
Mas mau tanya ada gak tutorial buat pencarian data pada google map?. terima kasih
sumber datanya dari database atau dari google maps mas?
di ambil dari database mas
Makasi untuk artikel nya mas..
saya mau minta bantuannya mas, kalau mau tampilkan gambar dari database ke info windows bagaimana ya ? tolong di bantu. sebelumnya makasih.
Mas mau tanya, jika di coba keluar pesan ” Ups! Ada sesuatu yang salah.
Laman ini tidak memuat Google Maps dengan benar. Lihat konsol JavaScript untuk mengetahui detail teknisnya. ”
Yg harus diperbaiki bagian mananya mas? soalnya saya lsg download source nya, database sudah tersambung, cuman “maps/peta tidak muncul”.
Trm kasih sblmnya ^^
Edit : sudah bisa mas ternyata. Untuk di akses secara offline apakah bisa mas? soalnya tadi saya coba matikan koneksi internet, maps tidak mau muncul. Saya pake XAMPP untuk server lokalnya mas.
solusinya itu gimana mas? soalnya saya mengalami hal yang sama.
bisa mas, tapi untuk memunculkan icon kenapa harus klik angka 4 yang ada di map ya?
ma mau tanya nih, ini kok waktu zoomnya di buat kurang dari 14 markernya gak keliatan ya 😀 baru belajar nih mohon bimbingan
linknya mati
engga koq, coba di refresh ulang
Sudah coba pakai API Key mas? Kalau blm coba daftar > Request API Key Maps Google
kenapa ditempat saya setelah saya rubah untuk aplikasi lain dilocalhost saya munculnya ups ada yang salah
Kemungkinan karena ga pakai Key API Google, coba mas cek referensinya disini
makasih bgt gan..makasih banget berkat koding ini tugas selsai..
min apakah bisa membuat icon marker sendidri untuk gis dg api dari google?