Menampilkan Marker Terdekat di Google Maps Dengan PHP-MySQL

Pada artikel sebelumnya kita sudah membahas bagaimana cara menampilkan lokasi terdekat dengan menggunakan Google Place. Nah, kali ini yang akan kita bahas adalah tentang bagaimana cara melakukan menampilkan marker terdekat di Google Maps berdasarkan jarak atau radius tertentu dari Database MySQL dan script PHP.

Sebenarnya teknik ini tidak ada hubungannya dengan script pada Google Maps, kita hanya perlu melakukan query di MySQL saja yang nantinya akan dieksekusi dengan menggunakan AJAX request  agar data dapat ditampilkan tanpa harus memuat ulang halaman.

Pada studi kasus kita kali ini saya akan mencoba menampilkan lokasi terdekat di Google Maps yaitu lokasi kafe / kedai kopi yang ada di kota Bandung.

Menampilkan Marker Terdekat di Google Maps # Database

Pertama, kita akan menyiapkan sebuah database dan juga table untuk menampung semua kedai kopi yang ada di Kota Bandung. berikut adalah struktur tablenya :

Pada struktur table diatas, kita dapat melihat nama_kafe sebagai nama kafe / kedai kopi yang akan kita cari, alamat untuk alamat kedai tersebut dan yang terakhir adalah latitude dan juga longitude untuk koordinat dari kafe / kedai kopi tersebut di peta. Dua kolom ini yang akan kita butuhkan untuk pencarian di Google Maps.

Nah untuk query SQL yang akan kita jalankan adalah sebagai berikut :

Menampilkan Marker Terdekat di Google Maps # Script

Sekarang kita akan mulai membuat script untuk menampilkan marker terdekat dengan menggunakan PHP.

tampil.php

Pada script ini kita akan membuat sebuah query untuk mengambil data marker yang  ada di database yang posisinya dekat dengan posisi user yang dikirim melalui AJAX, paramater yang digunakan adalah @position dan juga @jarak.

Parameter @position adalah paramater yang dikirim dari request AJAX yang memuat data lokasi dari user, sedangkan @jarak adalah radius untuk batas pencarian koordinat, dengan ini kita bisa bebas menampilkan marker yang berada dalam radius jarak yang kita sudah kirim sebelumnya.  Data hasil pencarian kita encode menjadi format JSON.

index.html

Berikutnya adalah script untuk interface peta. Pada script ini kita akan membuat sebuah interface untuk menampilkan form, peta dan juga marker dari hasil pencarian yang sudah kita lakukan di script sebelumnya. Untuk menampilkan marker terdekat di Google Maps kita tinggal melakukan parsing data JSON dari script tampil.php yang kita eksekusi melalui AJAX request. setelah itu kita tinggal menampilkannya kedalam sebuah variable.

Menampilkan Marker Terdekat di Google Maps # Output

Sekarang kita tinggal menjalankan script diatas di browser kita, saat pertama kali dijalankan browser akan meminta izin untuk mengambil koordinat lokasi jaringan yang kita gunakan seperti berikut ini

Silahkan pilih Allow, maka Output dari script diatas adalah sebagai berikut :

Menampilkan Marker Terdekat di Google Maps

Output diatas menunjukan bahwa saya sedang menggunakan jaringan selular operator dengan server yang berlokasi di Bandung. nah saya sedikit iseng untuk mengubah server saya dan ini dia hasilnya

Menampilkan Marker Terdekat di Google Maps

Sekian pembahasan dari saya, silahkan dicoba dan semoga bermanfaat 😀

DemoDownload Link

 

 

 

 

 

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
Latest Comments
  1. Adam Wiranata S W Juli 22, 2016
    • El Cicko Juli 22, 2016
      • Adam Wiranata S W Juli 22, 2016
      • Ichal Pasolank Juni 19, 2017
  2. Erza Saputra Agustus 14, 2016
  3. dika September 4, 2016
  4. rezarion November 25, 2016
  5. muhammad amin Desember 28, 2016
  6. niken Mei 7, 2017
  7. bagus Juni 13, 2017
  8. Muh.Fatrisyal Saputra Juni 18, 2017

Tinggalkan Balasan