Cara Membuat Text Direction Map Dengan API Google Maps

Cara Membuat Text Direction Map Dengan Google Maps - Jika sebelumnya kita sudah membuat direction map, kali ini kita akan membuat Text Direction dengan menggunakan API Google Maps. Text direction adalah teks petunjuk jalan yang muncul di samping peta, berfungsi untuk memberi informasi petunjuk jalan seperti kapan jarak tikungan, putaran, dll. jika sebelumnya kita hanya di berikan petunjuk jalur disini kita akan di berikan petunjuk lokasi anda kapan harus berbelok, lurus, memutar, dll. Untuk lebih jelasnya langsung saja kita 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 text_direction.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 Text 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 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'));
    map.controls[google.maps.ControlPosition.TOP_CENTER].push(control);
  }

  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 Text 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 script kode di atas :

directionsDisplay.setPanel(document.getElementById('directions-panel'));

Script ini berfungsi menampilkan panel text direction, dalam kasus ini kita menggunakan elemen HTML dengan id directions-panel.

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 bahkan dapat memprint peta dan petunjuknya dengan cara tekan CTRL+P pada keyboard.

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

Selanjutnya kita bertemu lagi membahas Maps dengan text direction yang munculnya bukan di bagian samping tapi di atas marker setiap titik.

Baca disini : Cara Membuat Marker Direction Complex Map Dengan API Google Maps

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

1 komentar

MahardhikaOctober 17, 2015 at 9:43 AM
Mantep, gan!! misi mau tanya,, kalo misalnya saya ingin menyimpan hasil pencarian seperti jarak dan waktu yang akan ditempuh ke dalam database, bagaimana caranya?? makasih gan