Cara Membuat Travel Mode Map Dengan API Google Maps

Cara Membuat Travel Mode Map Dengan API Google Maps - Sebelumnya kita sudah membuat direction dengan teks mark, kali ini kita akan membuat direction map yang dapat di mengganti Travel Mode dari directionya dengan menggunakan API Google Maps. Travel mode adalah mode perjalanan yang anda lakukan apakah anda mengendarai mobil, berjalan, bersepeda atau menaiki kendaraan umum. Map kali ini akan kita gunakan yang terdapat directions panelnya di samping akan tetapi kali ini kita dapat menggati travel modenya. untuk lebih jelasnya langsung saja kita ke pakteknya.

Untuk menulisakan script anda dapat menggunakan apa saja bebas, contoh : Notepad, Notepad++, Dreamwaver, NetBeans, Eclipse.

HTML

Jika anda belum membuat folder Google_maps buatlah sebuah folder dengan nama Google_maps kemudian buat sebuah file HTML dengan nama travel_mode.html kemudian masukan script :

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Membuat Travel Mode Map dengan API Google Maps</title>
    <style>
   html { height: 100% }
   #panel{padding:5px;}
      .input {
   height: 25px;
   padding: 2px;
   width: 200px;
      }
   .select{
   height: 33px;
   padding: 2px;
   }
   #btn{
     height: 31px;
     background: #267BA8;
     border: none;
     padding: 5px;
     color: #fff;
   }
   #directions-panel {
        height: 100%;
        float: right;
        width: 300px;
        overflow: auto;
      }
   #map-canvas { height: 400px;}
   *{
   margin: 0;
   padding: 0;
  }
  body {
   text-align:center;
   background-color:#61b3de;
   font-family:Arial, Helvetica, sans-serif;
   font-size:80%;
   color:#666;
  }
  .wrap {
   background: #f3f8fb;
   width:900px;
   margin:30px auto;
   border: 4px dashed #61b3de;
   border-radius:4px;
   padding: 20px 5px;
  }
  h1 {
   font-family:Georgia, "Times New Roman", Times, serif;
   font-size:24px;
   color:#645348;
   font-style:italic;
   text-decoration:none;
   font-weight:100;
   padding: 10px;
  }
  .copy{
   margin-top: 20px;
   clear: both;
  }
  @media print {
   #map-canvas {
     height: 500px;
     margin: 0;
   }

   #directions-panel {
     float: none;
     width: 100%;
   }
    }
    </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 latlng = new google.maps.LatLng(-6.187931, 107.031279);
    var mapOptions = {
   zoom: 12,
   center: latlng
    }
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    directionsDisplay.setMap(map);
    directionsDisplay.setPanel(document.getElementById('directions-panel'));
  }

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

  google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
 <div class="wrap">
  <h1>Jin Toples Programming</h1>
  <h1>Membuat Travel Mode Map dengan API Google Maps</h1>
  <div id="panel">
    <input class="input" id="start" type="text" value="Kebalen, bekasi">
    <input class="input" id="end" type="text" value="Universitas bhayangkara, bekasi">
    <select id="mode" class="select">
     <option value="DRIVING">Driving</option>
     <option value="WALKING">Walking</option>
     <option value="BICYCLING">Bicycling</option>
     <option value="TRANSIT">Transit</option>
    </select>
    <input id="btn" type="button" value="Search" onclick="calcRoute()">
  </div>
  <div id="directions-panel"></div>
  <div id="map-canvas"></div>
  <p class='copy'>Copyright &copy <a href="http://jintoples.blogspot.com">Jin Toples Programming</a> 2015</p>
 </div> 
  </body>
</html>

Perhatikan baris kode di atas :

var selectedMode = document.getElementById('mode').value;
    var request = {
     origin:start,
     destination:end,
     travelMode: google.maps.TravelMode[selectedMode]
    };

Variabel selectMode berisi value mode perjalanan yang kita pilih, kemudian travelMode memanggil variabel selectMode sehingga travelMode akan berdasarkan mode perjalanan yang kita pilih.

Anda dapat mencobanya sekarang dengan cara membukanya di browser anda, disarankan membukanya dengan browser Chrome atau Mozilla, jangan menggunakan IE Bkakakak.... jika di IE tidak jalan saya sudah tidak heran.

Apabila anda mengganti mode bicycling atau transit tidak berubah maka data mode tersebut terkadang tidak tersedia untuk perjalanan dekat, coba pergi ke daerah yang lebih jauh.

Anda juga dapat print peta serta teks rutenya dengan tekan CTRL+P di keyboard.

Apabila masih ada yang binggung anda juga dapat membacanya dari refrensi langsung di dokumentasi Travel Modes in Direction API Google Maps di sini : CEK TKP

Selanjutnya kita bertemu lagi membahas cara membuat jalur di direction yang dapat di tarik atau di drag sesuai keinginan kita.

Baca disini : Cara Membuat Draggable Directions Map Dengan API Google Maps

Travel Mode Map Dengan API Google Maps anda sekarang sudah selesai, baca juga tutorial program HTML dan Javascript lainnya.