BLANTERORBITv102

    Cara Membuat Pencarian Lokasi Pada Google Maps Menggunakan PHP dan MySQL

    Kamis, 30 Maret 2017

    Pembukaan

    Fitur pencarian pada sebuah aplikasi merupakan hak yang penting, karena dengan memanfaatkan fitur pencarian memudahkan user atau pengguna aplikasi dalam menemukan suatu data. Pada tutorial sebelumnya yaitu Cara Membuat Google Maps dengan Database Mysql kita sudah bisa menghubungkan setiap data pada database ke dalam google maps. Dalam hal ini kita akan coba memasukan fitur pencarian kedalam aplikasi tersebut.
    Cara Membuat Pencarian Lokasi Pada Google Maps Menggunakan PHP dan MySQL
    Gambar 1

    Pembahasan

    Sebelum masuk kedalam tutorial ada beberapa hal yang perlu di perhatikan kembali, yaitu penggunaan css dan javascript. Pada aplikasi sebelumnya kita sudah menggunakan datatable untuk menampilkan data, namun ternyata datatable ini conflik dengan javascript yang akan di gunakan untuk pencarian. Sehingga saya harus menghapus dan menggunakan script default bootstrap saja untuk interface dan menampilkan data. 
    1. Edit File header.php
      Kali ini kita akan merombak seluruh isi dari file header.php, berikut adalah sintak program yang ada pada file ini.
      <head>
       <title>Java Sc Developer</title>
       <link rel="stylesheet" type="text/css" href="assets/bootstrap/bootstrap.css">
       <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
       <script src="//code.jquery.com/jquery-1.10.2.js"></script>
       <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
       <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
       <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDKN8E3VeLkA5mgeENXiKp9tjhPlQ95TPc&callback=initMap">
          </script>
      </head>
      
      Perhatikan bahwasannya saya menggunakan javascript dan css yang online, jika tidak online bisa buka masing-masing filenya dan buat file tersebut secara ofline sendiri (download).
    2. Edit File footer.php
      Berikut adalah footer yang sudah di ubah, silahkan di sesuaikan dengan file footer sebelumnya. 
      <script type="text/javascript" src="assets/bootstrap/bootstrap.js"></script>
      Aneh bukan? yang sebelumnya ada 5 baris menjadi 1 baris. Ya silahkan anda bisa pandai-pandai untuk mengatur file footer jika hanya satu baris.
    3. Edit File conf.php
      Pada file conf.php kita akan menambah query sql untuk mencari data, silahkan tambah kode program php di bawah kedalam file conf.php.
      public function cariData($table , $kolom1, $kolom2 ,$value1, $value2 ){
        $cari = $this ->db->prepare("SELECT * FROM $table WHERE $kolom1 LIKE '%{$value1}%' OR $kolom2 LIKE '%{$value1}%' ");
        $cari->execute();
        return $cari;
       }
      
       public function tampilDataPencarianLokasi($tabel , $kolom, $value){
        $cari = $this->db->prepare("SELECT * FROM $tabel WHERE $kolom=$value");
        $cari->execute();
        return $cari;
       }
      Silahkan letakan pada bagian mana saja asal tidak keluar dari block class untuk confignya, ya saya sarankan letakan saja di bagian tengah kode sederatean dengan fungsi untuk menampilkan data.
    4. Tambah File koordinat_cari.php
      Nah disinilah ada beberapa file yang di tambah yaitu file koordinat_cari.php dan file json_cari.php. Masing-masing memiliki fungsi yang berbeda-beda, kita ulas saja satu persatu. Buat lah file koordinat_cari.php kemudian tambahkan script berikut di dalamnya.
      <?php
      include 'conf.php';
      $konfigurasi = new konfigurasi();
      $getData = $konfigurasi->tampilDataPencarianLokasi('tabel_data','id',$_GET['id']);
      header("Content-type: text/xml");
      try {
       echo "<markers>";
       if ($getData->rowCount() == 1) {
          $result = $getData->fetch(PDO::FETCH_OBJ);
         echo "<marker ";
         echo "a='" . $result->id. "' ";
         echo "b='" . $result->latitude. "' ";
         echo "c='" . $result->longitude. "' ";
         echo "d='" . $result->keterangan. "' ";
         echo "e='" . $result->kategori. "' ";
         echo "/>";
        }
       echo "</markers>";
      }
      catch (PDOException $e) {
       echo $e->getMessage();
      }
      ?>
      
      Bahwasannya file ini kita gunakan untuk mengambil data pada database berdasarkan "id" data atau bisa saja kondisi lain yang di inginkan. Sama halnya seperti kode program yang ada pada file koordinat.php, namun ini hanya menampilkan satu data saja.
    5. Tambah File json_cari.php
      File json_cari.php ini kita akan gunakan untuk fungsi pencarian data autocomplete pada form. Form akan menerapkan fungsi jquery autocomplete sehingga memudahkan dalam pencarian data berdasarkan kriteria atau nilai tertentu. Berikut adalah isi dari file json_cari.php.
      <?php
      include 'conf.php';
      $konfigurasi = new konfigurasi();
      if (isset($_GET['term'])) {
      $getData = $konfigurasi->cariData('tabel_data','id','keterangan', $_GET['term'],$_GET['term']);
      $arr = array();
      while ($data = $getData->fetch(PDO::FETCH_ASSOC)) {
          $arr[] = array(
            'label' => $data['id'].' - '.$data['keterangan'],
            'value' => $data['id'].','.$data['keterangan'].','.$data['latitude'].','.$data['longitude'],
          );
      }
      echo json_encode($arr);
      }
       ?>
      Data yang sudah kita ambil akan kita tampilkan kedalam sebuah array, adapun yang disimpan dalam array adalah label dan value. Label berfungsi untuk menampilkan list data yang kita cari kerdasarkan nilai pada id dan keterangan. Sedangkan value adalah nilai yang akan tampil di dalam texfield (form pencarian).
    6. Edit File home.php
      Terakhir adalah bagian penting dari aplikasi ini, semua aksi pada maps akan di tampilkan didalam file ini. Silahkan ubah sepenuhnya atau anda dapat melihat dan menyesuaikan kode program di file home.php sebelumnya dengan kode program berikut.
      <style type="text/css">
        .gm-style-iw {color: #000000;margin: 0 0 0 0}
        .gmnoprint div {color: #000000;}
      </style>
      <script type="text/javascript">
          function initMap() {
            var map1;
            var geocoder = new google.maps.Geocoder;
            markerBaru = [];
            var styleGMaps = [
        {
          "featureType": "road.local",
          "elementType": "geometry",
          "stylers": [
            { "visibility": "on" },
            { "invert_lightness": true },
            { "gamma": 1.96 },
            { "lightness": -65 },
            { "saturation": 53 },
            { "hue": "#00e5ff" },
            { "weight": 0.2 },
            { "color": "#dd6630" }
          ]
        },{
          "featureType": "water",
          "elementType": "geometry.fill",
          "stylers": [
            { "invert_lightness": true },
            { "lightness": 33 },
            { "gamma": 0.84 },
            { "hue": "#0008ff" },
            { "visibility": "on" },
            { "saturation": 38 },
            { "weight": 2.2 },
            { "color": "#4f90f4" }
          ]
        },{
          "featureType": "road.arterial",
          "elementType": "geometry.fill",
          "stylers": [
            { "visibility": "on" },
            { "invert_lightness": true },
            { "color": "#ffb147" },
            { "saturation": 23 },
            { "hue": "#ff9100" },
            { "lightness": -30 },
            { "gamma": 4.09 },
            { "weight": 2.1 }
          ]
        },{
          "featureType": "landscape.natural",
          "elementType": "geometry.fill",
          "stylers": [
            { "visibility": "on" },
            { "lightness": -14 },
            { "color": "#5cae8e" },
            { "weight": 0.4 },
            { "saturation": 34 },
            { "gamma": 1.42 }
          ]
        }
      ];
            var styled = new google.maps.StyledMapType(styleGMaps,
              {name: "Styled Map"});
      
            var mapOptions = {
                center: {lat: 0.5163256, lng: 101.4437629},
                zoom:12,
                mapTypeControlOptions: {
                  mapTypeIds: [google.maps.MapTypeId.ROADMAP, 'map_style']
                },
                mapTypeControl: false,
                zoomControl: false,
                scaleControl: false,
                streetViewControl: false,
                rotateControl: false,
                fullscreenControl: false
              };
      
              var mapAwal = {
                  center: {lat: 0.5163256, lng: 101.4437629},
                  zoom: 12 ,
                  mapTypeId: google.maps.MapTypeId.ROADMAP
              };
              map = new google.maps.Map(document.getElementById('map1'),mapOptions);
              map.mapTypes.set('map_style', styled);
              map.setMapTypeId('map_style');
              var infoWindow = new google.maps.InfoWindow;
              downloadUrl("koordinat.php", function(data) {
                var xml = data.responseXML;
                var markers = xml.documentElement.getElementsByTagName("marker");
                for (var i = 0; i < markers.length; i++) {
                  var latitude = parseFloat(markers[i].getAttribute("b"));
                  var longitude = parseFloat(markers[i].getAttribute("c"));
                  var keterangan = markers[i].getAttribute("d");
                  var kategori = markers[i].getAttribute("e");
                  var icon = 'assets/images/'+kategori+'.png' || {};
                  var marker = new google.maps.Marker({
                    map: map,
                    position: {lat:latitude,lng:longitude},
                    icon: icon,
                  });
                  bindInfoWindow(marker, map, infoWindow, keterangan);
                }
              });
      
              document.getElementById('cariLokasi').addEventListener('click', function() {
                cariLokasi();
              });
      
              function cariLokasi() {
                setMapOnAll(null);
                var input = document.getElementById('cari_lokasi').value;
                var latlngStr = input.split(',', 4);
                var posisi = new google.maps.LatLng(latlngStr[2], latlngStr[3]);
                var lokasiMarker = latlngStr[0];
                geocoder.geocode({'location': posisi}, function(results, status) {
                  if (status == google.maps.GeocoderStatus.OK) {
                    if (results[1]) {
                      map.setCenter(posisi)
                      downloadUrl("koordinat_cari.php?id="+lokasiMarker, function(data) {
                        var xml = data.responseXML;
                        var markers = xml.documentElement.getElementsByTagName("marker");
                          var latitude = parseFloat(markers[0].getAttribute("b"));
                          var longitude = parseFloat(markers[0].getAttribute("c"));
                          var keterangan = markers[0].getAttribute("d");
                          var kategori = markers[0].getAttribute("e");
                          var icon = 'assets/images/CARI.png' || {};
                          var marker = new google.maps.Marker({
                            map: map,
                            position: {lat:latitude,lng:longitude},
                            icon: icon,
                          });
                          bindInfoWindow(marker, map, infoWindow, keterangan);
                      });
                    } else {
                        window.alert('Tidak ada hasil');
                      }
                  } else {
                    window.alert('Pencarian tidak lengkap, silahkan pilih berdasarkan data yang ditampilkannJANGAN LUPA FOLLOW : www.java-sc.com');
                  }
                });
              }
      
            function bindInfoWindow(marker, map, infoWindow, keterangan) {
              markerBaru.push(marker);
              google.maps.event.addListener(marker, 'click', function() {
                infoWindow.setContent(keterangan);
                infoWindow.open(map, marker);
      
              });
            }
      
            function setMapOnAll(map) {
                  for (var i = 0; i < markerBaru.length; i++) {
                    markerBaru[i].setMap(map);
                  }
                }
      
            function downloadUrl(url, callback) {
              var request = window.ActiveXObject ?
                  new ActiveXObject('Microsoft.XMLHTTP') :
                  new XMLHttpRequest;
      
      
              request.onreadystatechange = function() {
                if (request.readyState == 4) {
                  request.onreadystatechange = doNothing;
                  callback(request, request.status);
                }
              };
      
              request.open('GET', url, true);
              request.send(null);
            }
      }
      
          function doNothing() {}
      </script>
      <script>
      $(document).ready(function() {
          $('#cari_lokasi').autocomplete({
              source: 'json_cari.php'
          });
          $("#refresh").click(function() {
             $("#map1").load("index.php")
          });
      })
      </script>
      <div class="row">
        <div class="col-md-12">
          <div class="panel panel-success">
              <div class="panel-heading">
                  <center><h4>LOKASI PELAYANAN UMUM DI KOTA PEKANBARU</h4></center>
              </div>
              <div class="panel-body">
                <div class="col-md-4">
                  <input type="text" class="form-control" name="cari_lokasi" id="cari_lokasi" placeholder="Cari Lokasi Disini"/>
                </div>
                <div class="col-md-2">
                  <buttons class="btn btn-primary" id="cariLokasi">Cari Lokasi</button>
                </div>
                <div class="col-md-5">
                    <a href="index.php?page=kelola" class="btn btn-warning">Halaman Kelola</a>&nbsp
                    <a href="#" class="btn btn-danger" id="refresh">Refresh Maps</a>
                </div>
            </br>
              </br>
                <div id="map1" style="width:100%;height:450px" ></div>
              </div>
          </div>
        </div>
      </div>
      Kita akan coba ulas kode program diatas dan dimulai dari beberapa sintak html (form pencariannya). Untuk form pencarian bisa kita lihat pada baris 192 s/d 202 dimana ada beberapa atribut yang digunakan. Perhatikan baris ke delapan, di situ tertera pemanggilan class Geocoder pada google maps yang kita fungsikan untuk penggunaan pencarian berdasarkan nilai lat dan long. Setelahnya adalah variabel array dengan penamaan markerBaru = [] pada baris 9, variabel ini nanti kita akan gunakan untuk penghapusan marker ataupun sejenisnya yang ada pada maps. Untuk penghapusan marker bisa kunjung tutorial Cara Menghapus Marker Dari Maps Pada Google Maps. Pada baris 111 s/d 143 adalah fingsi pencarian dan menampilkan hasil lokasi yang kita cari. Didalamnya ada fungsi untuk penghapusan marker yaitu pada baris ke 112. Lalu pada baris berapa sintak untuk menghapus marker? silahkan lihat pada baris 154 s/d 158. Agar berfungsi pastikan seluruh marker pada maps harus lah tersimpan di dalam array yang baru saja di buat. Jadi fungsi penyimpanan pada array menggunakan fungsi push, perhatikan pada baris 146. Terakhir adalah memanggil fungsi cariLokasi() agar dapat di klik pada tombol yang sudah di buat sebelumnya. Silahkan perhatikan pada bari 107 dan 109.

    Penutup


    Cara Membuat Pencarian Lokasi Pada Google Maps Menggunakan PHP dan MySQL

    Sebuah sistem tanpa fitur pencarian adalah sistem yang cacat, bayangkan saja ada banyak data namun tidak berfungsinya filtering dan pencarian tentu akan merepotkan pengguna. Dalam kasus ini kita telah mempraktekan fiitur pencarian untuk pemetaan daerah di Pekanbaru.

    Terimakasih sudah berkesempatan untuk menimba ilmu dari blog JSC, semoga ilmu yang di share dapat bermanfaat. Jika ada pertanyaan mengenai ilmu yang terkait ataupun tidak, mari kita berdiskusi di dalam kolom komentar ini.

    Keep Learning and Keep Sharing

    1. min boleh minta file header buat offline nya? saya liat link downloadnya mati

      BalasHapus
      Balasan
      1. kalau untuk file header sudah ada di atas, lengkap kalau untuk bootstrap bisa download sendiri.

        Hapus
    2. Balasan
      1. Maaf gan, di tutorial ini sudah lengkap semua, tinggal download file bootstrap saja (bisa cek di google). :)

        Hapus
    3. index.php nya ketinggalan mas, tolong di uploadkn. terima kasih sebelumnya

      BalasHapus
      Balasan
      1. File index.php bisa lihat tutorial yang sebelumny > http://www.java-sc.com/2016/07/google-maps-dengan-php-dan-mysql.html

        Hapus
    4. maaf, mau nanya mengapa marker penanda saya tidak keluar? bagaimana cara setting nya menggunakan icon? saya masih newbie...

      trus mengapa saat masuk input, menu rubah dan hapus tidak dapat berfungsi?

      mohon bantuannya

      BalasHapus
      Balasan
      1. Apakah agan sudah pelajari tutorial yang saya buat sebelum tutorial Cara Membuat Pencarian Lokasi Pada Google Maps Menggunakan PHP dan MySQL? Kalau belum coba di pelajari satu-satu terlebih dahulu.

        Hapus
    5. Bagaimana caranya menampilkan foto di infoWindownya??

      BalasHapus
      Balasan
      1. SUdah ada pada postingan sebelumnya mas, silahkan di cek daftar isi.

        Hapus
    6. bro kalo langsung pencarian alamat masuk kedata base gmana?

      BalasHapus
      Balasan
      1. itu sudah pake database gan, kalau mau pencarian nya ngambil dari google maps terus disimpan mungkin bisa ditambahin aja tombol simpan. Contoh tombol "simpan riwayat pencarian", dan langsung di simpan kedatabase.

        Hapus
    7. bang bisa gak bantu menggunakan pencarian lokasi terdekat dengan haversine

      BalasHapus
      Balasan
      1. Wah saya blm bisa bantu koding, tapi kamu bisa terapkan kode program dari stack overflow ini Saya kira sangat rekomended deh. Kamu hanya perlu mengambil latLang dari kedua tujuan, kemudian di masukan ke dalam formula.

        https://stackoverflow.com/questions/14750275/haversine-formula-with-php

        Hapus
    8. bang cara memanggil dipencarian itu masukan nama yang ada di database atau langlat yang dimasukan

      BalasHapus
      Balasan
      1. kalau saya nama lokasinya, semua tergantung agan mau pakai model yang mana,hanya merubah bagian query selectnya aja.

        Hapus
    9. min lonk download nya mana yahhh ???

      BalasHapus
    10. mas saya mau nanya ni ,,,,,,
      saya coba smunya udh nimbul kendalanya di pencariannya sama skli gak nemu padahal udh sesuai nama databasenya sama yg saya cari kendalanya diman yaa kira kira

      BalasHapus
      Balasan
      1. Coba lihatin error di console oada browser gan. Seharusnya ada notif error di situ.

        Hapus
    11. eror gak ada mas cumn langsung timbul aja alert "PENCARIAN TIDAK LENGKAP" padahal dipencarian tersebut sdh sesuai sama nama database

      BalasHapus
      Balasan
      1. Oke kalau yang tampil alert line 140, berarti masalahnya pada logic 118 yang mengecek data dari input. Pastikan apakah data tersebut sama dengan yang ada di database, dalam hal ini format dari latLang nya. Coba di cek lagi gan.

        Hapus
    12. Muncul keterangan saat pencarian "Pencarian tidak lengkap, silahkan pilih berdasarkan data yang ditampilkannJANGAN LUPA FOLLOW : www.java-sc.com".
      Mohon panduannya mas... Terimakasih.

      BalasHapus
      Balasan
      1. Oke kalau yang tampil alert line 140, berarti masalahnya pada logic 118 yang mengecek data dari input. Pastikan apakah data tersebut sama dengan yang ada di database, dalam hal ini format dari latLang nya. Coba di cek lagi gan.

        Hapus
    13. Bang saya bingung ni padahal sudah sesuai kodingan seperti toturial diata masalahnya ada di koordinat_cari.php
      ERORNYA =?>
      Notice: Undefined index: id in C:\xampp\htdocs\TA\koordinat_cari.php on line 4

      Fatal error: Uncaught PDOException: SQLSTATE[42000]: Syntax error or access violation: 1064 You have an error in your SQL syntax; check the manual that corresponds to your MariaDB server version for the right syntax to use near '' at line 1 in C:\xampp\htdocs\TA\conf.php:55 Stack trace: #0 C:\xampp\htdocs\TA\conf.php(55): PDOStatement->execute() #1 C:\xampp\htdocs\TA\koordinat_cari.php(4): konfigurasi->tampilDataPencarianLokasi('tabel_data', 'id', NULL) #2 {main} thrown in C:\xampp\htdocs\TA\conf.php on line 55

      BalasHapus
      Balasan
      1. apa ada menggunakan variabel id? itu variabel id datanya 0 (tidak ada).

        Hapus
    14. maksudnnya bang ? Mohon maaf sebelumnyaa saya masih blm bisa nangkap

      BalasHapus
      Balasan
      1. maksud saya, apakah di database ada field "id"... harusnya data yang diparse koordinat_cari.php itu menyesuaikan yang ada didatabase.

        Hapus
    15. tetap gak nemu bang masalahnya sama dengan kasus yang diatas id gak kebaca
      mohon di cek bang bagian config.php dibagian tampilpencariandata dengan koordinat_cari.php

      BalasHapus
      Balasan
      1. Pakai php 5.6 minimal kan? Coba bagian query $kolom=$value tambahkan kutip jadi $kolom='$value' .

        Hapus
    16. This page contains the following errors:
      error on line 2 at column 1: Extra content at the end of the document
      Below is a rendering of the page up to the first error.

      ERORNYA malah kyk yang diatas bang

      BalasHapus
    17. saya mengunakan php 7.0.23 bang

      BalasHapus
      Balasan
      1. coba di json_cari.php ini kamu jalankan menggunakan browser, kasih parameter pencarian. contoh localhost\javasc\map\json_cari.php?id=1.

        Hapus