BLANTERORBITv102

    Cara Menampilkan Rute Alternatif Di Google Maps

    Senin, 25 Juni 2018

    Pembuka

    Pada tutorial Cara Menampilkan Rute Alternatif Di Google Maps Api adalah untuk memberikan rute alternatif yang di pilih ketika kita menentukan posisi awal dengan posisi tujuan. Seperti pada tutorial sebelumnya, kita tetap menggunakan kode program pada tutorial Cara Menampilkan Deskripsi Arah Pada Rute dengan Google Maps

    Pembahasan

    Bukalah file pada tutorial sebelumnya, kemudian didalam fungsi initMap() kita akan menambah beberapa fungsi diantaranya adalah fungsi untuk menampilkan item pada panel berdasarkan rute yang di pilih atau pun sebaliknya, dan fungsi untuk menghapus rute sebelumnya. Dibagian awal tambahkan variabel baru dengan nama polyOptions, variabel ini akan menyimpan data polyline. Bisa diletakan sebelum variabel directionsService.
    var polyOptions = [];
    Kemudian tambahkan 3 fungsi berikut setelah fungsi calculateAndDisplayRoute(), kamu bisa liat dimana bagian akhir fungsi tersebut melalui tanda kurung kurawal.
    function removeLine(options,directionsDisplay) {
      for(var i = 0; i < options.length; i++){
        options[i].setMap(null);
        options[i].setVisible(false);
      }
      directionsDisplay.setMap(null);
    }
    
    function clickPanel(polyline,directionsDisplay){
      console.log(directionsDisplay.getRouteIndex());
      google.maps.event.addListener(directionsDisplay,'routeindex_changed',function(){
        for (var i = 0; i < polyline.length; i++) {
          polyline[i].setOptions({
            strokeOpacity: 1.0,
            strokeColor: "#16a085",
            zIndex: 0
          });
        }
        if (this.getRouteIndex() < polyline.length) {
          polyline[this.getRouteIndex()].setOptions({
            strokeOpacity: 1.0,
            strokeColor: "#c0392b",
            zIndex: 1
          });
        }
          
      });        
    }
    
    function clickLine(polyline,directionsDisplay,index){
     google.maps.event.addListener(polyline[polyline.length - 1], 'click', function(evt) {
       for (var i = 0; i < polyline.length; i++) {
            polyline[i].setOptions({
              strokeOpacity: 1.0,
              strokeColor: "#16a085",
              zIndex: 0
            });
          }
          this.setOptions({
            strokeOpacity: 1.0,
            strokeColor: "#c0392b",
            zIndex: 1
          });
      directionsDisplay.setRouteIndex(index);  
      });
    }
    Selanjutnya panggil fungsi removeLine di dalam onChangeHandler dan tambahkan parameter polyOptions di fungsi calculateAndDisplayRoute, sehingga kode onChangeHandler akan berubah seperti kode berikut.
    var onChangeHandler = function() {
        removeLine(polyOptions,directionsDisplay);
        polyOptions = [];
        calculateAndDisplayRoute(directionsDisplay, directionsService,map,polyOptions);
    };
    Di fungsi calculateAndDisplayRoute() juga ditambahakan parameternya, agar data dapat digunakan di dalam fungsi, yang mana sebelum fiubah adalah seperti kode berikut.
    function calculateAndDisplayRoute(directionsService, directionsDisplay)
    dan setelah di tambahkan polyOptions akan menjadi seperti berikut.
    function calculateAndDisplayRoute(directionsDisplay, directionsService,map,polyOptions) {
    ......
    }
    Berikut adalah kode javascript yang ada didalam fungsi calculateAndDisplayRoute() yang akan menampilkan rute.
    function calculateAndDisplayRoute(directionsDisplay, directionsService, map,polyOptions) {
      directionsService.route({
        origin: document.getElementById('start').value,
        destination: document.getElementById('finish').value,
        travelMode: 'DRIVING',
        optimizeWaypoints: false,
        provideRouteAlternatives: true,
      }, function(response, status) {
        if (status === 'OK') {
            var pathPoints ;
            var routeLeg;
            for (var i = 0, len = response.routes.length; i < len; i++) {
              routeLeg = response.routes[i].legs[0];
              pathPoints = response.routes[i].overview_path;
              var polyPath = new google.maps.Polyline({
                path: pathPoints,
                strokeColor: "#16a085",
                strokeOpacity: 1.0,
                strokeWeight: 5,
                map: map,
                clickable:true,
              });
              polyOptions.push(polyPath);
              if (i == 0) polyOptions[0].setOptions({
                strokeColor: '#c0392b',
                strokeOpacity: 1.0,
                zIndex: 1
              });
              polyOptions[polyOptions.length - 1].setPath(pathPoints);
              directionsDisplay.setRouteIndex(i);
              directionsDisplay.setDirections(response);
              directionsDisplay.setOptions({ 
                polylineOptions: polyOptions,
                suppressPolylines : true,
              });
              directionsDisplay.setPanel(document.getElementById('panel'));
              directionsDisplay.setMap(map);
              clickLine(polyOptions,directionsDisplay,i);
          }
          clickPanel(polyOptions,directionsDisplay); 
          $("#error").empty();
          $("#error").removeClass();
        } else {
          directionsDisplay.setMap(null);
          directionsDisplay.setPanel(null);
          $("#error").addClass("badge badge-danger");
          $("#error").text("Tidak dapat menemukan nama lokasi, status error: "+status);
        }
      });
    }
    Dapat diperhatikan kode diatas mengambil seluruh data yang diberikan (response) ketika rute di load dari Google Maps Api. Kemudian seluruh data tersebut kita set kembali di dalam fungsi setOption, dan di simpan didalam directionDisplay untuk kemudian diload dan ditampilkan kedalam peta. Jika sudah berhasil maka seharusnya akan menampilkan rute seperti gambar berikut.
    Cara Menampilkan Rute Alternatif Di Google Maps 2
    Gambar 2

    Penutup

    Sekian tutorila mengenai Cara Menampilkan Rute Alternatif Di Google Maps Api, masih banyak kekurangan tentunya dalam pembuatan tutorial tersebut. Adapun tutorial ini tidak begitu sempurna sehingga kamu dapat mengedit dan mengkostum fitur yang akan di gunakan. Untuk kesalahan ataupun koreksi silahkan menggunakan kolom komentar.

    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. Kirim via email kalo dibolehin azkazulham.amongsaufa@gmail.com

      BalasHapus
    2. waduh sory agan, file nya sudah gak ada lagi. ;(

      BalasHapus