Mudah Membuat Jalur Menggunakan Direction Service!

Unknown 08.14 2 Comments API , Direction , Google , Google Maps , Maps , Render , Service Edit

Pada postingan kali ini saya akan menjelaskan penggunaan sebuah service dari Google Maps API yang berguna untuk menampilkan jalur dari sebuah titik menuju titik lain. Service yang dimaksud yaitu "Direction". Postingan ini merupakan lanjutan dari postingan sebelumnya. Bagi yang belum mengerti ada baiknya melihat postingan sebelumnya terlebih dahulu disini! dan disini!.

Saya akan menjelaskan script yang berhubungan dengan Direction Service ini. Perhatikan dengan baik-baik!
Gunakan DirectionRenderer untuk membuat objek pembentuk jalur.

 directionsDisplay = new google.maps.DirectionsRenderer();

Gunakan sebuah fungsi Javscript dalam penanganan dalam membuat rute. origin merupakan titik awal rute, destination merupakan titik akhir rute dan travelMode merupakan pengaturan jalan yang dipilihkan oleh rute. travelMode memiliki beberapa jenis yaitu Driving (Mobil), Bicycling(Sepeda), Transit (Bus Transit) dan Walking (Pejalan Kaki).
Bagian yang harus diperhatikan ketika membuat sebuah jalur yaitu pada bagian origin, destination, dan travelMode.

function calcRoute() {
  var start = document.getElementById('start').value;
  var end = document.getElementById('end').value;
  var request = {
      origin:start,
      destination:end,
      travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
}

Intinya, script seperti ini hanya untuk menampilkan jalur yang disediakan oleh Google Maps berdasarkan kordinat yang kita berikan. Karena itulah, bagian origin, destination dan travelMode merupakan bagian yang harus diperhatikan.

Sebagai contoh, saya akan membuat sebuah jalur pada peta Google Maps dari Universitas Andalah menuju Pantai Padang. Perhatikan script berikut!

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Directions service</title>
    <style>
      html, body, #map-canvas {
        height: 100%;
        margin: 0px;
        padding: 0px
      }
      #panel {
        position: absolute;
        top: 5px;
        left: 50%;
        margin-left: -180px;
        z-index: 5;
        background-color: #fff;
        padding: 5px;
        border: 1px solid #999;
      }
    </style>
    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
function initialize() {
  directionsDisplay = new google.maps.DirectionsRenderer();
  var pusat = new google.maps.LatLng(-0.98772938, 100.8723876);
  var mapOptions = {
    zoom:7,
    center: pusat
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  directionsDisplay.setMap(map);
}
function calcRoute() {
  var start = new google.maps.LatLng(-0.915705, 100.460992);
  var end = new google.maps.LatLng(-0.942835, 100.351351);
  var request = {
      origin:start,
      destination:end,
      travelMode: google.maps.TravelMode.DRIVING
  };
  directionsService.route(request, function(response, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(response);
    }
  });
}
    </script>
  </head>
  <body onload="intialize()">
  <div id="panel"> Rute dari Universitas Andalas menuju Pantai Padang.
  <button onclick="calcRoute()">Rute!</button>
  </div>
   
    <div id="map-canvas"></div>
  </body>
</html>

Note: Baca postingan sebelumnya agar lebih mengerti mengenai script Google Maps di atas!
Saya akan menjelaskan bagian penting dalam menampilkan jalur/rute.
1. DirectionService dan DirectionRenderer
DirectionService merupakan objek yang meng-handle dalam penggunaan direction service. Direction Renderer merupakan objek yang meng-handle dalam menggambarkan jalur dari Google Services ke dalam peta.

var directionsService = new google.maps.DirectionsService();

var directionsDisplay = new google.maps.DirectionsRenderer();

2. Nilai awal dan akhir dari jalur

var start = new google.maps.LatLng(-0.915705, 100.460992);  var end = new google.maps.LatLng(-0.942835, 100.351351);

3. Fungsi untuk membuat jalur
Pada origin dan destination lah kita memasukkan nilai awal dan nilai akhir jalur. travelMode digunakan untuk mengatur tipe jalur yang akan dibuat.

var request = {
      origin:start,
      destination:end,
      travelMode: google.maps.TravelMode.DRIVING
  };

4. Menampilkan jalur di peta
Jika status rute yang dibuat berdasarkan variabel request bernilai OK maka jalur akan ditampilkan.

 directionsService.route(request, function(result, status) {
    if (status == google.maps.DirectionsStatus.OK) {
      directionsDisplay.setDirections(result);
    }
  });

5. Pemicu untuk memanggil fungsi dalam menampilkan jalur
Untuk memanggil sebuah fungsi kita membutuhkan sebuah trigger/pemicu agar fungsi tersebut dapat dijalankan. dalam kasus ini, fungsi untuk memanggi rute ada "calcRoute()" sehingga pemicu yang digunakan terdapat pada sebuah <button> dengan event "onClick".

<button onclick="calcRoute()">Rute!</button>

Dengan demikian kita telah bisa menampilkan jalur dari sebuah titik awal menuju titik akhir menggunakan Direction Service pada Google Maps. Berikut tampilan dari jalur yang telah saya buat.

Jalur Pake Direction Service

Cukup sekian mengenai Direction Service yang digunakan untuk menampilkan jalur. Jika ada yang ingin ditanyakan silahkan bertanya pada kolom komentar. Terima kasih. Sukses semua :D

Silent Please!

Mudah Membuat Jalur Menggunakan Direction Service!

Share this:

CONVERSATION

2 komentar: