Cara Menampilkan Rute Peta Google Maps Dari Database

Pembuka

Menampilkan Rute Peta Google Maps Dari Database

Pada tutorial ini, saya akan memberikan contoh bagaimana implementasi untuk menampilkan rute berdasarkan data yang ada di dalam database. Untuk contoh kamu bisa lihat tutorial sebelumnya mengenai Cara Membuat Aplikasi Google Maps Dengan PHP dan MySQL. Jika anda sudah costum dengan pencarian maka alangkah bagusnya lagi, berikut tutorial yang saya maksud adalah Cara Membuat Pencarian Lokasi Pada Google Maps Menggunakan PHP dan MySQL. 

1. Membuat Rute Sederhana dengan Google Maps.
2. Menampilkan Deskripsi Rute dengan Google Maps.
3. Menampilkan Informasi Rute Menggunakan Info Window di Google Maps.
4. Menampilkan Rute Peta Dari Database.
5. Menampilkan Rute Alternatif Di Google Maps.

Pembahasan

Tutorial ini anda perlu memahami kode program sebelumnya, seperti yang saya terangkan pada pembuka. Pastikan anda sudah memahami bagian atau setiap baris pada kode program tersebut, sehingga anda akan mudah untuk mengikuti tutorial ini. Disini saya tidak memberikan seluruh kode program lagi karena saya rasa tutorial sebelumnya sudah sekedar dari cukup. 

1. Kita akan mulai dari file conf.php, kemudian tambahkan query untuk mengambil data pada tabel.
   

   public function combo($tabel) {
      $combo = $this->db->prepare("SELECT * FROM $tabel");
      $combo->execute();
      return $combo;
   }

   Kamu dapat menambahkan fungsi tersebut setelah fungsi terakhir pada baris program, sebagai contoh fungsi terakhir pada file conf.php saya adalah tampilDataPencarianLokasi(), maka saya dapat letakan dibawah fungsi tersebut..
2. Selanjutnya beralih ke file home.php, di file inilah kita akan menambah kode javascript untuk pembuatan rute. Jika kamu membuka tutorial Cara Mebuat Pencarian Lokasi, kamu akan temukan juga pengubahan script pada file tersebut. Kamu lihat pada Line ke 9 yaitu variabel markerBaru. Tambahkan tiga variabel berikut setelah atau sebelum variabel markerBaru.

   var markerArray = [];
   var directionsService = new google.maps.DirectionsService;
   var directionsDisplay = new google.maps.DirectionsRenderer;

3. Cari variabel infoWindow, seperti kode berikut:
   

   var infoWindow = new google.maps.InfoWindow;

   Kemudian tambahkan kode berikut di bawah (setelah) variabel infoWindow. Kita tahu script ini adalah script untuk menampilkan rute, seperti pada tutorial sebelumnya mengenai pembuatan Rute.

   directionsDisplay.setMap(map);
   directionsDisplay.setPanel(document.getElementById('panel'));
   calculateAndDisplayRoute(directionsDisplay, directionsService, markerArray, infoWindow, map);
   var onChangeHandler = function() {
      calculateAndDisplayRoute(directionsDisplay, directionsService, markerArray, infoWindow, map);
   };
   
   document.getElementById('start').addEventListener('change', onChangeHandler);      
   document.getElementById('finish').addEventListener('change', onChangeHandler);

4. Selanjutnya adalah menambah tiga fungsi yaitu calculateAndDisplayRoute(), showSteps(), dan attachInstructionText(). Tiga fungsi ini bisa di letakan setelah fungsi downloadUrl(), berikut adalah fungsi yang di maksud.

   function calculateAndDisplayRoute(directionsDisplay, directionsService, markerArray, stepDisplay, map) {
     for (var i = 0; i < markerArray.length; i++) {
       markerArray[i].setMap(null);
     }
     directionsService.route({
       origin: document.getElementById('start').value,
       destination: document.getElementById('finish').value,
       travelMode: 'DRIVING'
     }, function(response, status) {
       if (status === 'OK') {
         directionsDisplay.setDirections(response);
         showSteps(response, markerArray, stepDisplay, map);
         $("#error").empty();
         $("#error").removeClass();
       } else {
        $("#error").addClass("badge badge-danger");
         $("#error").text("Tidak dapat menemukan nama lokasi, status error: "+status);
       }
     });
   }
   
   function showSteps(directionResult, markerArray, stepDisplay, map) {
     var myRoute = directionResult.routes[0].legs[0];
     for (var i = 0; i < myRoute.steps.length; i++) {
       var marker = markerArray[i] = markerArray[i] || new google.maps.Marker;
       marker.setMap(map);
       marker.setPosition(myRoute.steps[i].start_location);
       attachInstructionText(
           stepDisplay, marker, myRoute.steps[i].instructions, map);
     }
   }
   
   function attachInstructionText(stepDisplay, marker, text, map) {
     google.maps.event.addListener(marker, 'click', function() {
       stepDisplay.setContent(text);
       stepDisplay.open(map, marker);
     });
   }

5. Tahap terakhir adalah menambah combobox dan panel, dimana combobox akan menampilkan daftar lokasi dan panelmenampilkan informasi rute. Berikut adalah kode html nya, dengan disisipi kode php untuk menampilkan data didalam combobox. Kamu dapat melakukan replace kode html pada line 190 di tutorial Cara Membuat Pencarian.

   <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="row">
             <div class="col-md-3">
               <input type="text" class="form-control" name="cari_lokasi" id="cari_lokasi" placeholder="Cari Lokasi Disini"/>
             </div>
             <div class="col-md-2">
               <button class="btn btn-primary" id="cariLokasi">Cari Lokasi</button>
             </div>
             <div class="col-md-7">
               <a href="index.php?page=kelola" class="btn btn-warning">Halaman Kelola</a>&nbsp
               <a href="" class="btn btn-danger">Refresh Maps</a>
             </div>
           </div>
           <div class="row">
             <p>
               <div class="col-md-6">
                 <select class="form-control" id="start">
                   <option>Awal</option>
                   <?php
                   $awal = $konfigurasi->combo('tabel_data');
                   foreach ($awal as $key => $value) {
                   echo "<option value=".$value['latitude'].','.$value['longitude'].">".$value['keterangan']."</option>";
                   }
                   ?>
                 </select>
               </div>
               <div class="col-md-6">
                 <select class="form-control" id="finish">
                   <option>Tujuan</option>
                   <?php
                   $tujuan = $konfigurasi->combo('tabel_data');
                   foreach ($tujuan as $key => $value) {
                   echo "<option value=".$value['latitude'].','.$value['longitude'].">".$value['keterangan']."</option>";
                   }
                   ?>
                 </select>
               </div>
               <span id="error"></span>
             </p>
           </div>
           </br>
           <div class="col-md-8">
             <div id="map" class="card" style="width:100%;height:450px"></div>
           </div>
           <div class="col-md-4">
             <div class="card">
               <div id="panel" class="card-block" style="overflow-y: scroll;height: 400px;">
               </div>
             </div>
           </div>
         </div>
       </div>
     </div>
   </div>

   Perhatikan pada baris 26-29 dan 37-40, baris berikut adalah kode php untuk menapilkan data pada combobox.
   

Penutup

Seperti biasa, tutorial ini hanya sebagai contoh, silahkan di kostum sendiri dan dikembangkan. Apabila hasil kostum anda bermanfaat bagi anda semoga anda dapat share melalui kolom komentar agar menjadi ilmu yang bermanfaat dan di gunakan oleh bersama. Adapun beberapa saran dari saya adalah mengubah template dari aplikasi agar lebih interaktif, kemudian saat dilakukannya pemilihan combobox dari kota Awal maka di kota Tujuan data kota Awal tidak lagi di tampilkan. Terakhir yang meurut saya sangat baik adalah ketika dilakukannya pencarian rute maka yang tampil adalah kedua marker kota Awal dan Tujuannya saja.