Salahsatu fitur yang sering ada di aplikasi berbasis Google map adalah adanya fitur untuk memberi petunjuk jalan (direction) kepada pengunjung. sayangnya, banyak tutorial yang memberikan codenya cuman sepotong, dalam tutorial ini, akan saya tunjukan script lengkap yang bisa anda coba sendiri. Anda juga bisa mendowload source codenya. Tutorial ini membutuhkan PHP untuk memproses data lokasi yang dikirim oleh user.

Tampilan

berikut ini adalah tampilan dari direction Google map

Tampilan penunjuk arah dari jalan janti ke gejayan di kota yogyakarta

Tampilan penunjuk arah dari jalan janti ke gejayan di kota yogyakarta

Script Form

</pre>
<form class="form-inline" action="index.php" method="POST"><input class="input-large" type="text" name="asal" placeholder="Alamat asal" />
 <input class="input-large" type="text" name="tujuan" placeholder="Alamat Yang dituju" />

 <button class="btn btn-warning" type="submit">Rute</button></form>
<pre>
	Rute  Google maps</pre>
<div class="span8"><!--?php 	if(isset($_POST)) { 	$saddr = $_POST['asal']; 	$daddr = $_POST['tujuan']; 	include ('direction.php'); 			}?-->

Script direction Google map

var directionsService = new google.maps.DirectionsService();
     var directionsDisplay = new google.maps.DirectionsRenderer();

     var map = new google.maps.Map(document.getElementById('map'), {
       zoom:10,
       mapTypeId: google.maps.MapTypeId.ROADMAP
     });

     directionsDisplay.setMap(map);
     directionsDisplay.setPanel(document.getElementById('panel'));

     var request = {
       origin: '<!--?=$saddr;? -->',
       destination: '<!--?=$daddr;? -->',
       travelMode: google.maps.DirectionsTravelMode.DRIVING
     };

     directionsService.route(request, function(response, status) {
       if (status == google.maps.DirectionsStatus.OK) {
         directionsDisplay.setDirections(response);
       }
     });

Demo dan source code

Untuk mencoba demonya, silahkan klik disini, untuk mendownload source code lengkap klik disini.

Penulis: Candra Adi Putra

CandraLab Studio adalah Software house di Yogyakarta, Indonesia yang fokus ke aplikasi Mobile (Android) dan Web . Hubungi saya di candraadiputra(at) gmail.com

Tagged on:         

20 thoughts on “Script Petunjuk Arah Direction Google Maps

  • 11 November , 2014 at 5:34 pm
    Permalink

    gan kalo data rutenya ambil dari data base gimana caranya? misal punya data tempat beserta latitude,longitudenya nah mau menuju ke sana.gimana caranya?

    Reply
    • 22 November , 2014 at 11:18 am
      Permalink

      itu bukan msalah google map, itu cuman masalah query data php aja

  • 8 November , 2014 at 7:02 pm
    Permalink

    mas klo mengetahui petunjuk arahnya bahasa indonesia gmn. soalnya bahasa inggris terus mengetahui petunjuk arahnya

    Reply
  • 16 August , 2014 at 5:05 pm
    Permalink

    Latihan Google map

    #peta {
    width: 100%;
    height: 400px;

    }

    (function() {
    window.onload = function() {
    var map;
    var locations = [

    [‘id;?>’, lat;?>, lng;?>],

    ];

    //Parameter Google maps
    var options = {
    zoom: 12, //level zoom
    //posisi tengah peta
    center: new google.maps.LatLng(3.585242000000000000, 98.675597899999960000),
    mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    // Buat peta di
    var map = new google.maps.Map(document.getElementById(‘peta’), options);
    // Tambahkan Marker

    var infowindow = new google.maps.InfoWindow();

    var marker, i;
    /* kode untuk menampilkan banyak marker */
    for (i = 0; i < locations.length; i++) {
    marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map,
    icon: 'icon-perumahan.png'
    });
    /* menambahkan event clik untuk menampikan
    infowindows dengan isi sesuai denga
    marker yang di klik */

    google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
    var id= locations[i][0];

    $.ajax({
    url : "get_info.php",
    data : "id=" +id ,
    success : function(data) {
    infowindow.setContent(data);
    infowindow.open(map, marker);
    }
    });
    }
    })(marker, i));
    }

    };
    })();

    Mas Klu skrip nampilkan peta saya sprti ini, trus supaya bisa ditambah
    Script Petunjuk Arah Direction Google Maps gmn?

    Reply
  • 15 August , 2014 at 10:15 pm
    Permalink

    mohon pencerahan mas chandra ,bagaimana untuk alamat asal aku gunakan database dan untuk tujuan aku gunakan (alamat global google map ) , klo untuk asal dan tujuan dengan database bisa tp klo tujuan nya mengambil alamat dari google gimana ya mas chandra?? terima kasih

    Reply
    • 7 September , 2014 at 12:21 am
      Permalink

      Bang Arka boleh dong aku minta diajari yang lokasi asal-tujuannya pakai database. plisss…

  • 29 August , 2013 at 8:16 am
    Permalink

    rute perjalanannya bahasa indonesia bisa ndag ya mas??? Nuwun

    Reply
  • 3 August , 2013 at 4:27 pm
    Permalink

    petenya g muncul gan,,tak liatin d s.codenya di index.php,g ada map_canvasnya,apa itu ngaruhnya?makasih petunjuknya

    Reply
  • 3 August , 2013 at 5:34 am
    Permalink

    bos,gmn caranya waktu kita memasukan alamat awal sama alamat yang dituju,menggunakan markers dari database yang telah kita buat..makasi

    Reply
  • 25 June , 2013 at 7:44 am
    Permalink

    caranya biar hasil petunjuk arahnya menggunakan bahasa indonesia gimana ya?

    Reply
    • 30 June , 2013 at 12:31 am
      Permalink

      baca referensinya di google map api

  • 21 June , 2013 at 8:32 am
    Permalink

    gan ko ga jalan ya di lokal

    Reply
    • 23 June , 2013 at 12:24 am
      Permalink

      koneksi internetnya ada ga ? pastikan koneski internet hidup dan cek di javascript konsole [chrome=CTRL+SHIFT+I] ada warna merah ga? klo ada warna merah, berarti ada javascript yang error..

  • 6 May , 2013 at 10:13 am
    Permalink

    Gan bagaimana kasusnya jika menggunakan destinasi berubah dan untuk settingan requestnya menggunakan lat dan lang.

    Misalkan : Jakarta – Bandung Kota
    Akan dijadikan : Jakarta – Cikarang
    Update : Jakarta – Padalarang
    Final : Jakarta – Bandung Kota
    (penggunaan sistem device yang sudah tersambung dengan database)

    Note : Pengambilan nilai lat & lat dari DOM tidak akan terbaca di request.

    Mohon pencerahannya. Terima kasih #CMIIW

    Reply
    • 8 May , 2013 at 11:44 pm
      Permalink

      kalo itu ane belum tahu.

    • 10 May , 2013 at 8:27 am
      Permalink

      Gpp gan udah solved cuma di override aja terus, :),,thanks gan,klw gak ada pancingan ini tutor gak bakal solved.. :D ,,postingan yg laen jg keren” gan.. :D

  • 4 March , 2013 at 9:10 am
    Permalink

    tutorialx mantap mas n kalau digabung dengan android gimana tuh mas? mohon pencerahan, thanks

    Reply

Tinggalin komentar dong!