Menampilkan Marker Terdekat di Google Maps Dengan PHP-MySQL

Menampilkan Marker Terdekat di Google Maps Dengan PHP-MySQL

Pada artikel kali ini kita akan membahas tutorial tentang bagaimana cara 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 database MySQL yang nantinya akan dieksekusi dengan menggunakan AJAX.

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

Menampilkan Marker Terdekat di Google Maps

# Database

Pertama, kita akan menyiapkan sebuah database dan table untuk menampung semua kedai kopi yang ada di Kota Bandung.

CREATE TABLE `kafe` (
  `id` int(11) NOT NULL AUTO_INCREMENT,
  `nama_kafe` varchar(255) NOT NULL,
  `alamat` text NOT NULL,
  `latitude` varchar(255) NOT NULL,
  `longitude` varchar(255) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

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.

Baca Juga: Menampilkan Lokasi Terdekat Menggunakan Google Places

Dua kolom ini yang akan kita butuhkan untuk pencarian di Google Maps. Nah untuk query SQL yang akan kita jalankan adalah sebagai berikut :

SELECT id, nama_kafe, alamat, 
(6371 * acos(cos(radians(user_latitude)) 
* cos(radians(latitude)) * cos(radians(longitude) 
- radians(user_longitude)) + sin(radians(user_latitude)) 
* sin(radians(latitude)))) AS jarak 
FROM kafe 
HAVING jarak < 25 ORDER BY jarak;

# Script

Sekarang kita akan mulai membuat script dengan nama tampil.php untuk menampilkan marker terdekat dengan menggunakan 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.

<?php

header('Content-Type: application/json');

$link = mysql_connect('localhost','root','');
mysql_select_db('nearby', $link);

$position = explode(',', trim(urldecode($_GET['position'])));

$sql = "SELECT id, nama_kafe, alamat, latitude, longitude,
        (6371 * acos(cos(radians(".$position[0].")) 
        * cos(radians(latitude)) * cos(radians(longitude) 
        - radians(".$position[1].")) + sin(radians(".$position[0].")) 
        * sin(radians(latitude)))) 
        AS jarak 
        FROM kafe 
        HAVING jarak <= ".$_GET['jarak']." 
        ORDER BY jarak";

$data   = mysql_query($sql);
$json   = array();
$output = array();
$i = 0;

if (!empty($data)) {
    $json = '{"data": {';
    $json .= '"kafe":[ ';
    while($x = mysql_fetch_array($data)){
        $json .= '{';
        $json .= '"id":"'.$x['id'].'",
                 "nama_kafe":"'.htmlspecialchars_decode($x['nama_kafe']).'",
                 "alamat":"'.htmlspecialchars_decode($x['alamat']).'",
                 "latitude":"'.$x['latitude'].'",
                 "longitude":"'.$x['longitude'].'",
                 "jarak":"'.$x['jarak'].'"
                 },';
    }
 
    $json = substr($json,0,strlen($json)-1);
    $json .= ']';
    $json .= '}}';
     
    echo $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, lalu menampilkannya kedalam sebuah variable.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kafe / Kedai Kopi di Kota Bandung</title> 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootflat/2.0.4/css/bootflat.css">
<style type="text/css">
  body {
    padding-top: 10px;
  }
</style>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript" src="https://maps.google.com/maps/api/js"></script>
 <script>
      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -2.548926, lng: 118.0148634},
          zoom: 13
        });

        // Menggunakan fungsi HTML5 geolocation.
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            var pos = {
              lat: position.coords.latitude,
              lng: position.coords.longitude
            };

            marker = new google.maps.Marker({
              position: pos,
              map: map,
              icon: 'location.png',
              title: 'Posisi Kamu',
              animation: google.maps.Animation.DROP,
            });

            map.setCenter(pos);

            var user_location = position.coords.latitude+","+position.coords.longitude;
            var url = "tampil.php";
            var jarak = 1;
            var info = [];
            $.ajax({
                url: url,
                data: "position="+encodeURI(user_location)+"&jarak="+jarak,
                dataType: 'json',
                cache: true,
                success: function(msg){
                  for(i=0; i < msg.data.kafe.length;i++){
                    var point = new google.maps.LatLng(parseFloat(msg.data.kafe[i].latitude),parseFloat(msg.data.kafe[i].longitude));
                    tanda = new google.maps.Marker({
                        position: point,
                        map: map,
                        icon: "place.png",
                        animation: google.maps.Animation.DROP,
                        title: msg.data.kafe[i].nama_kafe
                    });
                  }
                }
            });

          }, function() {
            handleLocationError(true, map.getCenter());
          });
        } else {
          handleLocationError(false, map.getCenter());
        }
      }

      function showPlaces() {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -2.548926, lng: 118.0148634},
          zoom: 13
        });

        // Menggunakan fungsi HTML5 geolocation.
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            var pos = {
              lat: position.coords.latitude,
              lng: position.coords.longitude
            };

            marker = new google.maps.Marker({
              position: pos,
              map: map,
              icon: 'location.png',
              title: 'Posisi Kamu',
              animation: google.maps.Animation.DROP,
            });

            map.setCenter(pos);
            var user_location = position.coords.latitude+","+position.coords.longitude;
            var url = "tampil.php";
            var jarak = document.getElementById("jarak").value;

            $.ajax({
                url: url,
                data: "position="+encodeURI(user_location)+"&jarak="+jarak,
                dataType: 'json',
                cache: true,
                success: function(msg){
                  for(i=0; i < msg.data.kafe.length;i++){
                    var point = new google.maps.LatLng(parseFloat(msg.data.kafe[i].latitude),parseFloat(msg.data.kafe[i].longitude));
                    tanda = new google.maps.Marker({
                        position: point,
                        map: map,
                        icon: "place.png",
                        animation: google.maps.Animation.DROP,
                        title: msg.data.kafe[i].nama_kafe
                    });
                  }
                }
            });

          }, function() {
            handleLocationError(true, map.getCenter());
          });
        } else {
          handleLocationError(false, map.getCenter());
        }
      }
      function handleLocationError(browserHasGeolocation, pos) {
        var map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -2.548926, lng: 118.0148634},
          zoom: 13
        });
        var infoWindow = new google.maps.InfoWindow({map: map});
        infoWindow.setPosition(pos);
        infoWindow.setContent(browserHasGeolocation ?
                              'Error: The Geolocation service failed.' :
                              'Error: Your browser doesn\'t support geolocation.');
      }

      google.maps.event.addDomListener(window, 'load', initMap);
    </script>
</head> 
<body> 
  <div class="container">
    <div class="row">
      <div class="col-lg-12">
        <legend><h3>Cari Tempat Ngopi</h3></legend>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-9">
        <div id="map" style="width:100%; height:600px;"></div>
      </div>

      <div class="col-lg-3">
        <form class="form-vertical" method="post" action="#">
          <div class="form-group">
            <label>Radius / Jarak</label>
            <select id="jarak" name="jarak" class="form-control">
              <option value="">-- Silahkan Pilih Radius / Jarak --</option>
              <option value="1">1 KM</option>
              <option value="2">2 KM</option>
              <option value="3">3 KM</option>
              <option value="4">4 KM</option>
              <option value="5">5 KM</option>
              <option value="6">6 KM</option>
              <option value="7">7 KM</option>
              <option value="8">8 KM</option>
              <option value="9">9 KM</option>
              <option value="10">10 KM</option>
              <option value="11">11 KM</option>
              <option value="12">12 KM</option>
              <option value="13">13 KM</option>
              <option value="14">14 KM</option>
              <option value="15">15 KM</option>
              <option value="16">16 KM</option>
              <option value="17">17 KM</option>
              <option value="18">18 KM</option>
              <option value="19">19 KM</option>
              <option value="20">20 KM</option>
              <option value="21">21 KM</option>
              <option value="22">22 KM</option>
              <option value="23">23 KM</option>
              <option value="24">24 KM</option>
              <option value="25">25 KM</option>
              <option value="26">26 KM</option>
              <option value="27">27 KM</option>
              <option value="28">28 KM</option>
              <option value="29">29 KM</option>
              <option value="30">30 KM</option>
            </select>
          </div>
         
          <div class="form-group">
            <button id="cari" type="button" class="btn btn-primary" onclick="showPlaces();">Cari Tempat</button>
          </div>
        </form>
      </div>
    </div>
    <div class="row">
      <div class="col-lg-12">
        <hr>
        <footer>
         <p>© 2015 by <a href="https://elcicko.com">www.elcicko.com.</a></p>
        </footer>
      </div>
    </div>
  </div>

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
</body>
</html>

# 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

Menampilkan Marker Terdekat di Google Maps Dengan PHP-MySQL 1

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.

Setelah itu 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 😀

Demo
Download Link

13 pemikiran pada “Menampilkan Marker Terdekat di Google Maps Dengan PHP-MySQL”

  1. salam kenal mas, saya mau tanya. bagaimana radius itu bisa mengetahui bahwa marker yang dimunculkan masuk dalam jarak radius yang dipilih. dan bagaimana kita bisa membuktikan bahwa marker yang muncul itu masuk dalam radius yg dipilih. apakah ada rumus tersendiri atau bagaimana. terimakasih.

    Balas
    • Logika sederhananya adalah :
      Saat geolocation kita aktif, maka output dari lokasi kita adalah koordinat. Nah, pada lokasi2 yang tersempadn didalam database juga memiliki koordinat. Yang tinggal kita lakukan adalah melakukan operasi matematika pada query dengan membandingkan hasil pengurangan dari lokasi pada DB dengan lokasi kita.

      Rumusnya sederhananya adalah :
      Hasil = koordinat lokasi pada database – lokasi kita
      dari rumus ini hasilnya adalah sebuah koordinat juga…setelah itu dikonversi menjadi sebuah angka yang nantinya hasilnya adalah sebuah jarak dalam satuan KM.

      Balas
  2. gan, bagaimana kalo kita mau mempunya data lebih dari seribu yang tersimpan di phpmyadmin, disitu tersimpan lat , lang dari 1000 objek tadi beserta nama dari objek, caranya gimana mas biar bisa membaca data yang tersempan di database phpmyadmin?

    Balas
  3. kak blog ini sangat bermanfaat sekali, tapi saya ingin bertanya kak bagaimana cara merubah geolocation kita dengan koordinat posisi yang kita mau? jadi tanda hijau “posisi kita” berubah bukan jd posisi server kita lagi. mohon bantuannya kak

    Balas
  4. Sangat bermanfaat gan. Saya mau tanya, kalau pencarian lokasinya berdasarkan input alamat, jadi user bisa mencari marker terdekat berdasarkan inputan alamaynya/temoaynya. Itu bagai mana ya gan implemntasinya??

    Balas

Tinggalkan komentar