Google Direction - Mencari Rute Perjalanan Dengan API Sendiri


Mungkin kita pernah melihat aplikasi seperti Go-Jek yang menggunakan Maps sebagai rute perjalann atau arah yang dituju untu sebuah tujuan, dan juga dapat menntukan harga, jauh jarak maupun waktu yang dibutuhkan. Kali ini kita akan membuat rute menggunakan API Goole seperti layaknia Google MAPS namun ini versi kita-kita ja mas coder.

Pertama kita harus menntukan Titik start dan titik akhir. Untuk titik start, kita  akan menggunakan geolocation ( untuk keterangan lebih lanjut silahkan anda googling terlebih dahulu tentang geolocation  ini ). Dan untuk mendapatkan titik akhir, saat ini kita  menggunakan koordinat dengan metode klik pada map. Kali ini kita tidak menenukan berdasarkan alamat karena   metode ini agak kompleks, karena membutuhkan geocoder. Mungkin Artikel tutorial selanjutnya kita akan bahas itu.
Langkah 1 : Persiapan
Mendapatkan rute perjalanan lewat google, kita akan  membutuhkan 2 methode Google API.
  1. Directions service api : Adalah service dari Google Map yang berguna untuk menerima request arah dan memberikan kembalian arah dan hasil penghitungan arah.
  2. Directions display api : Berguna untuk menampilkan arah pada Google Map. Kali ini kita dapat menggunakan ini pada localdata didalam ruang 

Langkah 2 : Mulai Membuat
Saat ini kita main langsug aja, buat sebuah file dengan extansi javasript dengan nama DirectionsService.js ,dan isi file tersebut dengan coding dibawah ini :


 navigator.geolocation.getCurrentPosition(function(position) {
 
  // buat variabel cntr, isi dengan koordinat geolocation
  var cntr = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
  var mapCanvas = document.getElementById('map-canvas');
  var mapOptions = {
    center: cntr, // set pusat map dengan variabel cntr
    zoom: 10, // isi dengan zoom level 1-21
    mapTypeId: google.maps.MapTypeId.ROADMAP // tentukan map yang ingin ditampilkan
  }
  var mapku = new google.maps.Map(mapCanvas, mapOptions);
  
  var marker = new google.maps.Marker({
      position: cntr,
      map: mapku, // map berasal dari variabel mapku diatas
      title: 'Mulai disini'
  });
  
  // tambahkan event click map
  google.maps.event.addListener(mapku, 'click', function (e) {
    var end = new google.maps.LatLng(e.latLng.lat(), e.latLng.lng());
    var request = {
      origin:cntr, // set titik awal
      destination:end, // set titik tujuan
      travelMode: google.maps.TravelMode.DRIVING // travel mode
    };
    
    // set arah pada map
    directionsDisplay.setMap(mapku);
    directionsService.route(request, function(response, status) {
      if (status == google.maps.DirectionsStatus.OK) {
        // tampilkan arah
        directionsDisplay.setDirections(response);
      } else {
        alert('No rute here :)');
      }
    });
  });
});


Setelah membuat file DirectionsService.js diatas sekarang buat sebuah index.php dalam direktori yng kita buat untuk api ini, lalu memasukan coding dibawah ini dan simpan.


 <!DOCTYPE html>
<html>
  <head>
    <script type="text/javascript" src="DirectionsService.js "></script>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js"></script>
    <script>
      var directionsService = new google.maps.DirectionsService();
      var directionsDisplay = new google.maps.DirectionsRenderer();
      function resetMap() {
        directionsDisplay.setDirections({routes: []});
      }
      function show_map() {
        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(function(position) {
            var cntr = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);
            var mapCanvas = document.getElementById('map-canvas');
            var mapOptions = {
              center: cntr,
              zoom: 10,
              mapTypeId: google.maps.MapTypeId.ROADMAP 
            }
            var mapku = new google.maps.Map(mapCanvas, mapOptions);
            
            var marker = new google.maps.Marker({
                position: cntr,
                map: mapku,
                title: 'Mulai disini'
            });
            
            google.maps.event.addListener(mapku, 'click', function (e) {
              var end = new google.maps.LatLng(e.latLng.lat(), e.latLng.lng());
              var request = {
                origin:cntr,
                destination:end,
                travelMode: google.maps.TravelMode.DRIVING
              };
              
              directionsDisplay.setMap(mapku);
              directionsService.route(request, function(response, status) {
                if (status == google.maps.DirectionsStatus.OK) {
                  // tampilkan arah
                  directionsDisplay.setDirections(response);
                } else {
                  alert('No rute here :)');
                }
              });
            });
          });
        } else {
          alert('Browsert tidak support geolocation !!');
        }
      }
    </script>
  </head>
  
  <body onload="show_map()">
    <div class="box">
      <div id="map-canvas" class="canvas"></div>
      <input type="button" value="reset map" onclick="resetMap()">
    </div>
  </body>
</html>


Untuk tampilan seperti gambar diatas. Selanjutnya jika di akses melalui browser dan dapat anda nikmati sendiri sebagai menujuk arah anda. Kalo bisa pake Webview ya jon biar bisa di akses melalui smartphone.
Note : Untuk melakukan pengujian anda diminta terhubung dengan internet, API ini tidak dapat berjalan dengan cara offline, dan upload kedalam Hosting anda agar dapat anda akses melalui website anda ( Lumayan buat kren-krenan ).

Recommend Article × +

OWNER AND CO OF PT. TRANS TECHNO Freelance Web Design and Yii2 Development in ICT STKIP PGRI WEST SUMATRA. While Studying MAGISTER UPI-YPTK Padang,CEO CMS Codepedia, Lives in Padang - Indonesia | WhatsApp : 0853-7516-4491

Related Posts

Update Sesudahnya
« Prev Post
Update Sebelumnya
Next Post »