Cari Rute Perjalanan pake API Maps Javascript

Share:

Hello world's! Sudah menjadi kebiasaan kita semua apabila mengalami kesasar di tempat yang tidak kita kenali membuka Google Maps buat nyari jalan keluar yang benar. Tinggal ketik tempat yang kita tuju, muncul pin, terus klik mulai perjalanan deh.

Nah, selain di aplikasi maps sendiri, rute perjalanan kayak gini biasanya dipakai pada aplikasi driver ojek / taksi online. Tapi pernah kepikiran ngga, alat macam itu dipakai di web. Meskipun sepertinya kurang manfaat mengingat ga ada orang yang cari jalan sambil bawa laptop, tapi bisa cukup membantu jika dijadikan aplikasi layanan yang tampilannya responsif.

Kayanya sih gausah mikir ini bakalan bermanfaat bagi orang banyak apa engga dulu deh, yang penting kita bikin sesuatu dulu. Oke, langsung aja....

Dapetin API Key untuk langkah awal

Sebelum kita ngoding, kita ambil dulu API Key kita yang dikasih google dari API Console. Caranya cukup mudah, buka Google API Console dan buat projek jika belum ada atau pilih projek jika sudah ada (tapi biasanya bakalan auto-milih projek). Buka bagian kredensial. Kita klik tombol yang warnanya biru bertuliskan "Buat kredensial", terus pilih "Kunci API" dan bakalan generate random key yang merupakan API key kita.


Salin kuncinya, bila perlu simpan dalam text format.

Yuk ngoding!

Sekarang waktunya kita ngoding

<!DOCTYPE html>
<html>
<head>
   <meta charset="UTF-8">
   <title>Rute Maps</title>
   <style>
      #map {
         position: absolute;
         top: 0px;left: 0px;right: 0px;bottom: 0px;
      }
   </style>
</head>
<body>

<div id="map"></div>

<script>
function initMap() {
   var directionsService = new google.maps.DirectionsService
   var directionsDisplay = new google.maps.DirectionsRenderer
   var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 7,
      center: {
         lat: 41.85,
         lng: -87.65
      }
   })
   directionsDisplay.setMap(map)
   tampilRute(directionsService, directionsDisplay)
}

function tampilRute(directionsService, directionsDisplay) {
   // Ganti koordinat lat long sesuai lokasi yang pengen dilihat
   var berangkat = "-7.297199052899377, 112.73451105906906"
   var tujuan = "-7.258322100000001, 112.72481949999997"

   directionsService.route({
      origin: berangkat,
      destination: tujuan,
      travelMode: 'DRIVING',
   }, function(response, status) {
      if (status === 'OK') {
         directionsDisplay.setDirections(response)
      } else {
         console.log("Error gara-gara : " + status)
      }
   })
}
</script>
<script async defer src="https://maps.googleapis.com/maps/api/js key=YOUR-API-KEY&callback=initMap">

</body>
</html>

Selanjutnya, yang perlu dilakukan ialah mengganti koordinat berangkat dan tujuan (lat long) sesuai dengan lokasi yang pengen dilihat rute-nya. Untuk mendapatkan koordinat lat long ini bisa dilihat langsung di Google Maps, atau tunggu next post aja yang bakalan ngebahas gimana cara ngepick lokasi dari google maps javascript. See ya....

Tidak ada komentar