CandraLab

IT Pro & Developer Resource

Menu Close

Script Petunjuk Arah Direction Google Maps

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" />

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

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.

Administrator

Candra Adi Putra adalah Alumni STMIK AKAKOM Yogyakarta. Like Candralab Studio Di Facebook.

33 Comments

Add yours →

  1. andrifx says:

    gan kalo mau posisi asalnya netep di suatu tempat gimana gan..?

  2. Anonymous says:

    mas kok g bisa di jlankan ya? gmana mengatasi errornya
    Notice: Undefined index: asal in C:\xampp\htdocs\cs\index.php on line 70

    Notice: Undefined index: tujuan in C:\xampp\htdocs\cs\index.php on line 71

    if(isset($_POST));
    {
    $saddr = $_POST[‘asal’];
    $daddr = $_POST[‘tujuan’];
    include (‘direction.php’);
    }?>

    mohon bantuannya

  3. Yo says:

    kalo untuk ikon directionnya gmn mas…
    misalnya yg driving beserta ikonnya

  4. martin says:

    Mas,
    ketika sy tes di web saya keluar error spt ini sehingga hasilnya tidak tampil :
    Notice: Undefined index: asal in /home/u2197935/public_html/direk/index.php on line 69
    Notice: Undefined index: asal in /home/u2197935/public_html/direk/index.php on line 70

    dengan command
    $saddr = $_POST[‘asal’];
    $daddr = $_POST[‘tujuan’];
    kira2 kenapa ya ? Tks

  5. valentino dewa says:

    Kalo saya mau mengganti algoritma pencarian rutenya bisa atau tidak ya ?

  6. Edi Ristanto says:

    terima kasih mas,, atas tutorialnya,, sangat membantu…

  7. juanda fifty mahardhika says:

    bang, gimana caranya mengambil data jarak dan waktu tempuh dari google map diatas untuk disimpan di database?

  8. Rigen Richo Gito Onsu says:

    bang gmana cara merubah jalur jalan yang akan ditentukan?

  9. rigen says:

    bang candra gimana cara buka sourcecodenyA?

  10. Achmad Bin Warda'i says:

    mas gmna caranya menampilkan langsung ke lokasi yang di inginkan/ langsung menuju marker yang di tuju..
    saya sudah bikin maps tapi harus geser2 peta lau mau liat lokasi yang di tuju..
    trimakasih mas..

  11. ulum says:

    mas caranya gimana membuat penunjuk jalanya dengan metode suara

  12. Samuel says:

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

  13. sapanawahyuoe says:

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

  14. Fauji Rahman says:

    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?

  15. arka says:

    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

  16. kharisty says:

    makasi yaaa tutorialnya.. sangat membantu..

  17. falah says:

    makasih gan sangat bermanfaat buatku

  18. falah says:

    makasih mas sangat membantu sekali

  19. Christina says:

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

  20. andre says:

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

  21. umbu_awank says:

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

  22. eka says:

    caranya biar hasil petunjuk arahnya menggunakan bahasa indonesia gimana ya?

  23. dewi says:

    gan ko ga jalan ya di lokal

    • Candra Adi Putra says:

      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..

    • ihsan says:

      sama .. ane juga nggk bisa gan. cara memperbaiki javascript yang errornya gimana ya gan.. mohon pencerahannya. Thx.

  24. HK47 says:

    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

  25. b45r1 says:

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

Tinggalin komentar dong!