Google Maps Dengan Marker Multi Icon

Multi Icon

Hore, akhirnya bisa bikin artikel lagi disini setelah sekian lama bertapa di kantornya orang (mudah-mudahan ga kebaca sama si bos ). Yaps, kesibukan setiap harinya bikin saya ilang mood buat ngoding blog tapi mudah-mudahan bisa mood ngoding saya bisa normal lagi. Oke, kemarin-kemarin ada yang nanya gimana caranya bikin marker dengan multi icon dan icon itu berbeda-beda di Google Maps dengan Marker Multi Icon.

Nah, dulu saya pernah bikin tapi lupa naro dimana dan akhirnya ketemu juga dan saya modifikasi agar fiturnya bisa lebih keren lagi. Script yang saya buat ini selain bisa menampilkan marker dengan gambar ikon yang berbeda-beda tapi juga udah mendukung marker cluster yaitu pengelompokan marker biar ga numpuk dan juga Info Window untuk menampilkan nama lokasi dan juga alamat dari lokasi tersebut.

Nah, tunggu apa lagi ? sekarang kita buka text editor dan ketikkan script-nya seperti ini

Dari script diatas, output yang dihasilkan akan seperti dibawa ini

googlemaps-multiicon

nah, gimana ? gampang khan ? silahkan download full source-nya disini. Selamat mencoba dan semoga bermanfaat 😀

 

Berlangganan Artikel

Daftarkan email anda sekarang dan dapatkan update terbaru dari artikel saya

I will never give away, trade or sell your email address. You can unsubscribe at any time.

Powered by Optin Forms

32 tanggapan pada “Google Maps Dengan Marker Multi Icon”

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

    1. 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 🙂

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

  2. mas…kalo mau masukin link di info windowsnya bisa gak mas ? soalnya dah ane coba pake tag a href … malah mapnya gk mau nongol ?

    1. 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()

      1. 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 ^^

  3. 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]’

    1. 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 😀

  4. 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??

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

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

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

    1. 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)

  6. 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??

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

  8. 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 ^^

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

Tinggalkan Balasan