Cara Membuat Direction Map Dengan API Google Maps

Cara Membuat Direction Map Dengan API Google Maps - Kali ini kita akan membuat map yang dilengkapi dengan direction. Direction atau petunjuk arah adalah petunjuk jalur atau path lintasan yang harus di lalui dari alamat suatu lokasi menuju alamat lokasi lainnya. Dengan menggunakan fitur Directions service yang sudah dimiliki oleh API Google Maps kita dapat dengan mudah membuat petunjuk arah menuju suatu lokasi. Jika sebelumnya kita melakukan pencarian kordinat lokasi kali ini kita membuat map yang membantu kita mendapatkan petujuk arah ke lokasi tersebut. Untuk lebih jelansya 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 driection.html kemudian masukan script :

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <meta charset="utf-8">
    <title>Geocoding service</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;
   }
   #map-canvas { height: 400px; width:100%; }
   *{
   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:730px;
   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;
  }
    </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);
  }

  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 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="map-canvas"></div>
 </div>
  </body>
</html>

Perhatikan baris kode ini :

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);
   }
    });
  }

Ini adalah fungsi yang berjalan ketika anda menekan tombol search, fungsi ini adalah direction service yang kita gunakan untuk menemukan jalur dari titik start menuju titik end.

Perhatikan pada baris kode di atas :

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

origin adalah titik awal yang didapat dari var start berisi nilai inputan dengan id start

destination adalah titik tujuan yang didapat dari var end berisi nilai inputan dengan id end

travelMode adalah mode perjalanan yang anda lakukan apakah menggunakan mobil, sepeda, jalan, dll.

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 masih ada yang binggung anda juga dapat membacanya dari refrensi langsung di dokumentasi Directions Services API Google Maps di sini : CEK TKP

Selanjutnya kita bertemu lagi membahas Maps dengan direction atau petunjuk arah dari suatu lokasi ke lokasi lain yang di lengkapi dengan teks petunjuk kapan jarak anda berbelok.

Baca disini : Cara Membuat Text Direction Map Dengan API Google Maps

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