BLANTERORBITv102

    Cara Menampilkan Rute Peta Google Maps Dari Database

    Sabtu, 16 Juni 2018

    Pembuka

    Menampilkan Rute Peta Google Maps Dari Database
    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

    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.

    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. bang kalo dari posisi kita berada ada gak tutornya ?
      mohon bantuannya

      BalasHapus
      Balasan
      1. Tinggal kostum saja mbak pakai event listener, get koordinat awal menggunakan GPS habis itu cari tujuan mengunakan marker.

        Hapus
    2. permisi mas mau nanya ni misalkan rute dari posisi kita berada ke lokasi tujuann yang ada di database ada gak cara
      mohon panduannya mas

      BalasHapus
      Balasan
      1. pertnyaan sama kaya diatas mas, cuma kalau dari database kita hanya tentuin titik saja, misal saya sudah dapet koordinat awal (start) jadi saya harus dapat koordinat akhir (finish). Nah di koordinat finish saja yang kita pilih menggunakan event listener pada marker.

        Hapus
    3. nah kan yg koordinat akhir (finish) sdh ada di dalam database cara kodingan koordinat awalnya saya bingung barang kali ada refrensinya mas

      BalasHapus
      Balasan
      1. Ini referensinya untuk mengambil posisi awal adalah posisi kita saat ini. > www.java-sc.com/2018/06/cara-menampilkan-lokasi-pengguna-menggunakan-google-maps-geolocation.html

        Hapus
    4. ada panduannya kah mas yg pakai gps
      mohon pencerahannya

      BalasHapus
      Balasan
      1. Google Maps memakai geolocation, device harus support GPS.. panduannya ada di
        www.java-sc.com/2018/06/cara-menampilkan-lokasi-pengguna-menggunakan-google-maps-geolocation.html

        Hapus