Tutorial Google Maps – Menampilkan Multimarker di Google Maps
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 😀
34 Komentar
ami · Juli 19, 2014 pada 1:50 am
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
El Cicko · Juli 19, 2014 pada 2:53 am
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 🙂
Dayat Bong · September 7, 2016 pada 10:58 pm
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.
dedi · Agustus 8, 2014 pada 4:13 pm
mas…kalo mau masukin link di info windowsnya bisa gak mas ? soalnya dah ane coba pake tag a href … malah mapnya gk mau nongol ?
El Cicko · Agustus 8, 2014 pada 7:43 pm
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()
dedi · Agustus 10, 2014 pada 3:19 am
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 ^^
El Cicko · Agustus 11, 2014 pada 11:37 am
bukan mas..penggunaan quote di javascriptnya
wibowo · September 4, 2014 pada 8:51 am
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]’
El Cicko · September 4, 2014 pada 10:18 pm
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 😀
nippa · April 6, 2016 pada 9:57 am
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??
El Cicko · April 6, 2016 pada 10:30 am
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.
nippa · April 6, 2016 pada 1:45 pm
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
pulung · Mei 3, 2016 pada 2:23 pm
kalau mau diberikan select deselect combo boc untuk menampilkan marker sesuai keinginan giman gan ?
Mohammad Latif · Mei 14, 2016 pada 10:03 am
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
El Cicko · Mei 16, 2016 pada 10:42 am
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)
Novi Adi · Mei 28, 2016 pada 2:40 pm
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??
Sony Sugianto · Juli 20, 2016 pada 8:50 pm
Mas mau tanya ada gak tutorial buat pencarian data pada google map?. terima kasih
El Cicko · Juli 21, 2016 pada 8:16 am
sumber datanya dari database atau dari google maps mas?
Sony Sugianto · Juli 21, 2016 pada 9:36 pm
di ambil dari database mas
Thino Riwu · Juli 27, 2016 pada 12:23 am
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.
Dimas Demms · Juli 27, 2016 pada 8:35 pm
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 ^^
Dimas Demms · Juli 27, 2016 pada 10:49 pm
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.
Muhammad Abdi Alidrus · Agustus 3, 2016 pada 6:38 am
solusinya itu gimana mas? soalnya saya mengalami hal yang sama.
mas Deo · Agustus 26, 2016 pada 12:32 pm
bisa mas, tapi untuk memunculkan icon kenapa harus klik angka 4 yang ada di map ya?
Diky Wahyu · September 5, 2016 pada 7:37 pm
ma mau tanya nih, ini kok waktu zoomnya di buat kurang dari 14 markernya gak keliatan ya 😀 baru belajar nih mohon bimbingan
riduan · November 17, 2016 pada 1:18 pm
linknya mati
El Cicko · November 17, 2016 pada 1:53 pm
engga koq, coba di refresh ulang
Dimas Demms · Februari 16, 2017 pada 1:33 am
Sudah coba pakai API Key mas? Kalau blm coba daftar > Request API Key Maps Google
sigit · Februari 28, 2017 pada 1:01 pm
kenapa ditempat saya setelah saya rubah untuk aplikasi lain dilocalhost saya munculnya ups ada yang salah
El Cicko · Maret 2, 2017 pada 9:33 am
Kemungkinan karena ga pakai Key API Google, coba mas cek referensinya disini
erdian · Maret 3, 2017 pada 4:29 pm
makasih bgt gan..makasih banget berkat koding ini tugas selsai..
rubi · Maret 23, 2017 pada 10:29 am
min apakah bisa membuat icon marker sendidri untuk gis dg api dari google?
detri · Mei 3, 2020 pada 3:33 pm
maaf mas, mau nanya kalo petanya ga muncul kesahannya apa ya mas? soalnya ga ada pesan error nya
detri · Mei 3, 2020 pada 3:49 pm
mau nanya mas,, kalo petanya tidak muncul kesalahannya apa ya? soalnya ga ada pesan errornya