Cara Membuat Pencarian Lokasi Pada Google Maps Menggunakan PHP dan MySQL

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.

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).

Edit File footer.php
Berikut adalah footer yang sudah di ubah, silahkan di sesuaikan dengan file footer sebelumnya.
?
1
<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.

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.

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.

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).

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.

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

<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

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

Emoticon

Tentang Perjalanan6 Mei 2017 pukul 14.50
bisa kirim ke necha082@gmail.com
BalasHapus
Balasan
danangASdanajoo29 Mei 2017 pukul 08.45
min boleh minta file header buat offline nya? saya liat link downloadnya mati
BalasHapus
Balasan
Studio Musik Rafael15 Juni 2017 pukul 14.51
saya minta gan filenya boleh kah
BalasHapus
Balasan
zzaliza12 Juli 2017 pukul 12.16
index.php nya ketinggalan mas, tolong di uploadkn. terima kasih sebelumnya
BalasHapus
Balasan
DJI SKYLINE20 Juli 2017 pukul 16.08
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
Makmur25 Agustus 2017 pukul 22.50
Bagaimana caranya menampilkan foto di infoWindownya??
BalasHapus
Balasan
Unknown21 November 2017 pukul 22.15
bro kalo langsung pencarian alamat masuk kedata base gmana?
BalasHapus
Balasan
Unknown16 Januari 2018 pukul 11.28
bang bisa gak bantu menggunakan pencarian lokasi terdekat dengan haversine
BalasHapus
Balasan
Unknown24 Januari 2018 pukul 18.30
bang cara memanggil dipencarian itu masukan nama yang ada di database atau langlat yang dimasukan
BalasHapus
Balasan
MUHAMMAD HASBI24 Februari 2018 pukul 10.42
min lonk download nya mana yahhh ???
BalasHapus
Balasan
Unknown28 Februari 2018 pukul 21.33
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
Unknown1 Maret 2018 pukul 14.51
eror gak ada mas cumn langsung timbul aja alert "PENCARIAN TIDAK LENGKAP" padahal dipencarian tersebut sdh sesuai sama nama database
BalasHapus
Balasan
adi2 Maret 2018 pukul 15.49
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
Unknown5 Juli 2018 pukul 20.24
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
Unknown8 Juli 2018 pukul 13.42
maksudnnya bang ? Mohon maaf sebelumnyaa saya masih blm bisa nangkap
BalasHapus
Balasan
Unknown18 Juli 2018 pukul 19.57
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
Unknown22 Juli 2018 pukul 13.06
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
Balasan
Unknown22 Juli 2018 pukul 13.16
saya mengunakan php 7.0.23 bang
BalasHapus
Balasan

Cara Membuat Pencarian Lokasi Pada Google Maps Menggunakan PHP dan MySQL

Pembukaan

Pembahasan

Penutup

Author

Hady Eka Saputra

35 Komentar

Cara Membuat Program Java Menghitung Nilai Mahasiswa

Cara Membuat Program Java Dengan Switch Case

Cara Membuat Program Menghitung Nilai Mahasiswa Dengan Java GUI

Cara Menangani Pesan Error Pada Pemrograman Java di Netbeans

Cara Membuat Aplikasi Google Maps Dengan PHP dan MySQL

About Us

Followers

Categories

Social Media

Cara Membuat Pencarian Lokasi Pada Google Maps Menggunakan PHP dan MySQL

Pembukaan

Pembahasan

Penutup

Related Posts

Author

Hady Eka Saputra

35 Komentar

About Us

Followers

Categories