Loading...
PHP Javascript Ajax jQuery Tutorial Indonesia
  Desrizal
Mencoba berbagi ilmu yang sedikit dimiliki ini...
Home | PHP Manual Indonesia | Javascript Guide | eBook Ajax jQuery | Codingwear Store | About Me
Search in blog.codingwear.com :

Membuat GIS Google Map Marker Multi Icon dengan jQuery, PHP dan MySQL

05:13 09 Jan 2011 @Ajax

Kali ini kita akan membuat aplikasi GIS dengan Google Map API, di mana aplikasi GIS ini, kita bisa membuat marker pada map, marker yang dibuat bisa macam-macam gambar iconnya, tergantung jenis lokasinya, apakah bandara, mesjid, restoran, dan lainnya. Setelah memberi tanda atau marker, kita bisa memberi nama lokasi tersebut dan juga deskripsinya, kemudian kita simpan ke database.

Pada aplikasi GIS ini juga, kita bisa menampilkan keseluruhan marker yang telah disimpan di database MySQL tersebut dengan bantuan PHP dan JSON jQuery. Mari kita lihat.

Algoritma membuat aplikasi GIS ini hampir sama dengan tutorial sebelumnya, Membuat GIS Google Map Seperti Wikimapia dengan jQuery dan Membuat Geographic Information System (GIS) Sederhana dengan Google Map dan Ajax jQuery, silahkan dibaca-baca di situ tutorial dengan google map. Untuk icon-icon yang digunakan bisa buat sendiri atau anda download di http://code.google.com/p/google-maps-icons/

Silahkan Download Source Codenya

Tags: google map api google map api tutorial google map api php google map api code


Tulisan Lainnya
  1. Horizontal Scroll Website Menggunakan jQuery
  2. Membuat Sendiri Article Rewriter dengan Ajax
  3. Membuat GIS Google Map Marker Multi Icon dengan jQuery, PHP dan MySQL
  4. Membuat Kuis atau Ujian Online Ajax
  5. Membuat GIS Google Map Seperti Wikimapia dengan jQuery
  6. Membuat Berita Dinding Auto Refresh Seperti Twitter dengan jQuery dan PHP
  7. Download ebook (PDF) Panduan Lengkap PHP Ajax jQuery Bahasa Indonesia
  8. Membuat Script Notifikasi Seperti Facebook dengan jQuery dan PHP
  9. Tutorial jQuery Ajax Bagian 2 (Input, Update, Delete, Animasi Loading)
  10. Membuat Geographic Information System (GIS) Sederhana dengan Google Map dan Ajax jQuery

Komentar

#1 Dari : Agus (18:57 09 Jan 2011)
Web : http://hostmain-murah.com
Tutorial yang mantabs buat para pembelajar like me. Keep posting Bang Desrizal. I always stay tune this web...
#2 Dari : cupu (20:00 09 Jan 2011)
Web : -
untuk menambah jenis lokasinya gimana mas? aku nyoba nambah seperti sekolah kok tidak muncul yah
#3 Dari : kocuogebz (00:04 10 Jan 2011)
Web : http://kocuogebz.blogspot.com
gan google API apa benar hanya bisa digunakan untuk 1 ip saja ?? coz ane pernah buat setelah dijalankan di ip yg berbeda tidak tampil sama sekali sedangkan komputer yg ane pake sudah terkoneksi. mohon pencerahannya please via e-mail ...
#4 Dari : Desrizal (09:29 10 Jan 2011)
Web : http://blog.codingwear.com
Bisa jalan di IP mana saja, yang penting konek ke internet. Kemungkinan koneksi anda yang satu lagi lambat
#5 Dari : afriex (17:24 10 Jan 2011)
Web : -
Terima Kasih bgt mas...
Sangat membantu.....
#6 Dari : Nikolius (18:48 10 Jan 2011)
Web : http://nikolius-luiso.web.id
Wah web mantab nich bisa buat nambah referensi. :)
tengkiu mas dah bagi2 ilmunya. btw bisa minta alamat emailnya mas? ada yang mau saya konsultasikan. :)
#7 Dari : qhiena (08:24 14 Jan 2011)
Web : -
mas, saya lg nyoba google map api. utk nampilin marks knp saya cuma berhasil 2 mark yg kluar?saya sudah masukkan long&lat nya.. saya jg ingin nampilin window ketika mengklik marks tersebut. tp tdk bisa. sudah berhari2 saya coba & blm menemukan jln kluarnya.. saya tunggu penjelasannya di imel saya. Terima Kasih.
#8 Dari : Wra (09:33 16 Jan 2011)
Web : -
thx sangat membantu... Skarang Saya sudah bisa memasukan&menampilkan data lat lng dan semua data dari database, icon2 sesuai tipe lokasi, windows markernya,dll .. Semua bekerja sempurna.. :))
#9 Dari : IHsan (21:29 17 Feb 2011)
Web : http://ijenk.co.cc
serius.. ini bagus skali tutorial nya..
mas, makash bnyak share nya.

by the way, klo ingin data direction dan datanya bisa di query. bgmna?? soalnya sya kurng mngerti dgn mmbuat direction nya.
mkasih ia.
#10 Dari : jeef (21:27 05 Mar 2011)
Web : -
Benar benara keren...

thanks berat untuk sharingnya
sangatjelas dan mudah dipahami

semoga Allah SWT membalas semua kebaikan anda
#11 Dari : ferry (14:18 22 Mar 2011)
Web : -
cakep mas
#12 Dari : ferry (14:24 22 Mar 2011)
Web : -
cakep mas
#13 Dari : genduet (14:21 26 Mar 2011)
Web : http://goenduet.blogspot.com
mantap gan ,,, mau tanya gan, klo mau narik jarak berdasarkan jalan bagaimana ya ...? mohon pencerahannya gan ,,,
#14 Dari : leonardo siagian (11:34 30 Mar 2011)
Web : http://leonardoagian.wordpress.com
terimah kasih atas share nya..,mantap..
#15 Dari : funny facebook (10:09 11 Apr 2011)
Web : http://funnyfacebook.org
wah makasih banget, tutorial mas desrizal selalu mangstap
#16 Dari : deddy (10:36 14 Apr 2011)
Web : http://notepadqu.blogspot.com
Thx mas atas info nya, sangat bermanfaat.
oiy gimana sewaktu markernya di click peta nya langsung center ke posisi map yang di click.
aku sudah coba pake function panTo(), tapi kok ga bisa ya.
Mohon pencerahannya.
thx
#17 Dari : write an essay (18:25 03 May 2011)
Web : http://custom-essay.ws/faq.php
It's very good when you have so amny variants of markets on map.
#18 Dari : Fajar (08:38 06 May 2011)
Web : -
Mas terimakasih banyak tutorialnya ane, ane dah coba tambahin iconnya, terus ane rubah koordinat awalnya semua bisa. yg mau saya tanyain, klo kita kasih tanda di peta itu bisa diliat oleh orang lain ga lewat google maps yg dr google tanda yg kita buat? terus gimana caranya klo kita mau buat garis di peta itu, seumpama klo dari jalan A ke Jalan B kita mau tarik garis ngikuti jalanny giman carany mas?mohon bantuan y...bisa lewat email juga nh dibalesnya..:D
#19 Dari : roy (11:48 21 May 2011)
Web : -
mas google map api untuk surabaya timur ada??atau bagaimana cara croptnya agar satu daerah saja yg ingin di tampilkan bukan seluruh indonesia
#20 Dari : Ikbal (15:57 21 May 2011)
Web : http://ikbalsiami.wordpress.com/
Thanks Banget Tutorialnya...
ini sangat membantu...
#21 Dari : Yudi (14:19 26 May 2011)
Web : http://www.yudiarnanda.tk
kalau ingin menambah car menghitung jarak dari satu tempat ke tempat yg lain gmn ya cara nya? trims
#22 Dari : genduet (20:48 15 Jun 2011)
Web : http://goendut.blogspot.com
mas, mau tanya cara membuat routing (jalur terpendek) di google maps gmn ,,, mohon pencerahannya,,, thx
#23 Dari : Nurlela (19:20 05 Jul 2011)
Web : -
Apa nama data base nya mas???
#24 Dari : Nico Mollet (22:52 08 Jul 2011)
Web : http://mapicons.nicolasmollet.com
May I ask you to update a link in this article ?

My "Google map icons" website moved http://code.google.com/p/google-maps-icons/ from to http://mapicons.nicolasmollet.com

I would be pleased if you could change it :)

Thanks a lot !
#25 Dari : bagusodc (04:19 12 Aug 2011)
Web : http://kautzars.blogspot.com
mas..kalau ditambahin modus pencarian dan bisa di tambahin pilihan jenis lokasinya gimana caranya??? mohon petunjuknya!!! ^_*???
#26 Dari : pabx panasonic (10:24 16 Sep 2011)
Web : http://pabxpromo.com
thanks mas tutorialnya.
#27 Dari : panjianom (21:40 25 Sep 2011)
Web : -
Kalo mau membuat google map yg bila menampilkan sebuah rumah yg menghadap antara sudut 150° dan 210° dari selatan maka akan menghasilkan nilai TRUE.
gimana ya caranya mas Rizal?
#28 Dari : sedekh (11:18 28 Sep 2011)
Web : -
mas itu yang nampilin peta belitung yang punya mas desrijal ada gambarnya...

klu yang saya jalankan gak bisa nambah mas...

mohon bantuannya mas, kekmana masukin gambarnya...

bisa minta YMnya mas
#29 Dari : Mini (16:11 30 Sep 2011)
Web : -
Thankz atas ilmunya..
tapi Mau tanya kalo marker atau iconnya diklik langsung nge-link ke page atau url lain,
bagaimana caranya???
thankz Before
#30 Dari : Arif (19:39 31 Dec 2011)
Web : -
ini yang aku cari mas...
mau tanya mas...gimana kalo nampilin posisi kita pas akses google map, terus ngasih petunjuk jalan ke tempat2 tertentu...bales ya mas...ini Tugas akhir aku mas...makasih mas.
#31 Dari : Diana Roiswati (11:33 24 Jan 2012)
Web : http://dianaroiswati.blog.eepis-its.edu
Maaf mas,,, tanya. bagaimana jika caranya jika kita inputkan manual unt Att + long tdk harus klik tempatnya seperti itu. karena takutnya lokasi tidak tepat?
#32 Dari : lil0 (14:44 05 Mar 2012)
Web : http://trenggalek.info
untuk generate google maps api gimana ya mas??

soalnya sekarang halaman APInya udah berubah. ane coba ga bisa tuh krn kesalahan APIkey
#33 Dari : anto (09:51 06 Mar 2012)
Web : -
Kalo utk remove marker gmn ya caranya..?
jadi pas klik tampil marker: maka akan tampil marker, trus pas klik tombol remove markernya hilang/hide gitu

thankss
#34 Dari : Agus (13:11 06 Mar 2012)
Web : http://www.kuncilirik.com/
Bang Desrizal ,gmn caranya untuk memposisikan view setelah di klik iconnya tu tepat di titiknya ya seperti di http://blog.codingwear.com/read21-Membuat-Geographic-Information-System-%28GIS%29-Sederhana-dengan-Google-Map-dan-Ajax-jQuery.drz
#35 Dari : DagoSearch (11:51 20 Mar 2012)
Web : http://dagosearch.com
dago map di http://dagosearch.com/map.php , cara pakainya lihat http://www.youtube.com/watch?v=T8XyY6aXagI

#36 Dari : adi mahendra (10:56 14 Apr 2012)
Web : -
mas bisa gk di tambahin kode untuk layer dan too many marker????
tolong mas buat tugas nih,,,,,
#37 Dari : SUPRIyadi (14:09 20 Apr 2012)
Web : -
Bagaimana caranya ngasih garis/line antara satu titik ke titik lain. Kausnya begini misalnya kita startnya dari titik Masjid A terus ke restoran B kemudian terus ke Masjid C...dari situ kita bikin gambar garis dari : Masjid A - restoran B - Masjid C
Terima kasih
Ijin copypas dan menggunakannya...
#38 Dari : diro (22:26 23 May 2012)
Web : -
cara menentukan rute tercepat atau terpendek gmana ya massss??? mohon kalo ada pencerahan bisa dkirim lewat email mas, butuh bangettt nih mas..bangett.
makasih..
#39 Dari : shitsui (04:24 02 Jun 2012)
Web : -
mas bagaimana caranya agar data yang sudah ada bisa di update tanpa menghilangkan gambar.png yang ada di peta?

soalnya saya sudah coba dan gambar.png hilang di peta

terima kasih
#40 Dari : retsum (02:54 14 Jun 2012)
Web : -
mas bagaimana caranya kita menampilkan gambar yang kita punya di infowindow.?

terima kasih
#41 Dari : yadi (03:50 08 Jul 2012)
Web : http://www.jadijayamotor.16mb.com/
mantap...!!!
numpang nyedot gan....
thanks...
#42 Dari : moisture meter (09:10 12 Jul 2012)
Web : http://www.alatuji.com/article/detail/77/moisture-meter
hmm rada susah juga gan tapi makasih ya gan ilmunya
#43 Dari : timbangan (09:11 12 Jul 2012)
Web : http://www.timbanganindonesia.com
bagus banget gan ilmunya makasih ya gan
#44 Dari : isal (16:28 31 Jul 2012)
Web : -
keren websitenya .. semangat terus gan buat share ilmunya
#45 Dari : kastam (13:46 19 Sep 2012)
Web : -
Artikelnya sangat bagus, mas. Mantap, sy trial langsung OK. Tapi kalau saat diklik data yg ditampilkan tidak hanya 'judul' dan 'deskripsi', gimana caranya ya?Misal mau ditampilkan 'jenis' dan koordinatnya. Terima kasih sebelumnya.
#46 Dari : azhar eka pranata (09:57 02 Oct 2012)
Web : http://devils-online.blogspot.com
mas kalo pake mapserver atau map buatan sendiri gmn code panggilnya? mohon pencerahan mas
#47 Dari : firman (12:57 14 Oct 2012)
Web : -
mas klo mw ingin buat garis (polyline) gmn?? tolongin ya mas...bila ada wkt kirik di email saya...thanks...
#48 Dari : fahmi (00:18 11 Dec 2012)
Web : -
mhon bantuan infonya mas. untuk upload web gis ke hostingan online gratis punya infonya?
#49 Dari : Kastam Rusdi (10:03 26 Dec 2012)
Web : http://www.smartamazing.com
Selain Judul dan deskripsi sudah bisa tampil nih.

Mas, kalau tambah jenis peta yg ditampilkan gimna caranya? Sekarang hanya pilihan "TERRAIN". Misalnya saya mau tambah by Traffic

Thanks BGT
#50 Dari : agus (14:03 05 Feb 2013)
Web : -
saya nyoba menambahkan `alamat` di mysql dan saya sudah ngikutin syntak yg lain. tapi di google maps API tidak mau menampilkan alamat hanya menampilkan nama sama deskripsi saja. tlong dishare skriptnya.
terimakasih
#51 Dari : wijaya (00:53 09 Mar 2013)
Web : -
artikelnya bagus,...sebelum nanya nanya lebih banyak, ... salam kenal dulu yah mas...

thk,


Komentar
Nama :
Email :
Web :
Komentar :
Captcha Sepakbola
Apakah anda manusia?Lebih baik lagi kalau anda menyukai sepak bola
Sebutkan pemain sepak bola disamping:

Captcha Sepakbola by codingwear


CodingWear merupakan baju kaos keren, baju kaos unik buat para programmer, praktisi IT, pecinta coding

Subscribe in a reader

Follow codingwear on Twitter


Jendela Riau


Blogger Bertuah
Web Development
Book

Designed & Programmed by Desrizal
Copyright (c) 2010