MASIGNASUKAv101
4551133496077351792

Cara Membuat Pencarian Lokasi Pada Google Maps Menggunakan PHP dan MySQL

Cara Membuat Pencarian Lokasi Pada Google Maps Menggunakan PHP dan MySQL
Add Comments
Thursday, 30 March 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.
Hady Eka Saputra

Belajarlah ketika orang lain sedang malas-malasan, dan malas-malasan lah ketika orang sudah mulai sadar untuk belajar. :v