Cara Membuat Draggable Directions Map Dengan API Google Maps

Cara Membuat Draggable Directions Map Dengan API Google Maps - Jika sebelumnya kita membuat map yang dapat di ubah mode travel modenya, kali ini kita akan membuat Draggable Direction Map dengan API Google Maps. Draggable directions map adalah fitur api google maps yang memungkinkan kita mengubah rute perjalanan dengan mendrag jalur di mapsnya. Jadi dalam suatu kasus kita ingin pergi ke tukang cukur ( yahelah ke tukang cukur pake google maps bkakakakak ) tapi kita ingin melewati warung langganan kita sebelum ke tukang cukur, maka anda dapat mendrag jalurnya ke jalur yang melewati warung tersebut. Untuk lebih jelas langsung saja ke prakteknya.

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 draggable_directions.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 Draggable Drections Map dengan API Google Maps</title>
    <style>
   html { height: 100% }
   #panel{padding:5px;}
      .input {
   height: 25px;
   padding: 2px;
   width: 200px;
      }
   #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 rendererOptions = {
    draggable: true
  };
  var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
  var directionsService = new google.maps.DirectionsService();
  var map;
  
  function initialize() {
    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'));    
    calcRoute();
  }

  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);
   }
    });
  }
  google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
 <div class="wrap">
  <h1>Jin Toples Programming</h1>
  <h1>Membuat Draggable Drections 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">
    <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 :

var rendererOptions = {
    draggable: true
  };
  var directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);

Kita mengubah settingan render maps menjadi draggable:true sehingga jalur bisa di drag.

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.

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 Draggable Directions Map Dengan API Google Maps di sini : CEK TKP

Selanjutnya kita bertemu lagi membahas cara membuat street view anda sendiri.

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