SD Shared

Membuat Kalkulasi Rute dengan Geolocation Google Map API

Pertama kita membuat option select, seperti dibawah ini :

<select id="end" onchange="calcRoute()"  name="select-native-2" id="select-native-2"  data-mini="true">
            <option value="" data-placeholder="true">Pilih Tujuan </option>
            <option value="-6.168374,106.7586">Test1</option>
            <option value="-6.168374,106.7586">Test2</option>
</select>

Kemudian ciptakan method calRoute() seperti dibawah ini :

function calcRoute() {
   //Membuat marker untuk koordinat lokasi device tersebut untuk mendapatkan nilai koordinat untuk variabel start
   navigator.geolocation.getCurrentPosition(function(position) {
      var latitude  = position.coords.latitude;
      var longitude = position.coords.longitude;
      var latlng    = new google.maps.LatLng(latitude, longitude);
      var start = latitude+','+longitude;
      var end = document.getElementById('end').value;
      //Memulai konfigurasi untuk gps, type map, dari dan kemana tujuannya akhirnya.
      var request = {
          origin:start,
          destination:end,
          travelMode: google.maps.DirectionsTravelMode.WALKING
      };
      //Menjalankan konfigurasi gps diatas
      directionsService.route(request, function(response, status) {
        if (status == google.maps.DirectionsStatus.OK) {
          directionsDisplay.setDirections(response);
        }
      });
      //Munculkan panel kalkulasi rute pada tag div yang beratribut id = direction-panel
      directionsDisplay.setPanel(document.getElementById('directions-panel'));
   });
}

Dan jangan lupa untuk membuat konfigurasi awal map, yaitu seperti potongan kode dibawah ini :

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

function initialize() {
    directionsDisplay = new google.maps.DirectionsRenderer();
    var mapstart = new google.maps.LatLng(-6.842778,108.309444);
    var mapOptions = {
      zoom:9,
      mapTypeId: google.maps.MapTypeId.TERRAIN,
      center: mapstart
    }
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
   //Jangan lupa ini untuk memunculkan garis rute pada map
   directionsDisplay.setMap(map);

Berikan komentar jika merasa terbantu, terimakasih.