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.

Categories: Google Maps

Candra Adi Putra

Candra Adi Putra S.Kom adalah Alumni STMIK AKAKOM Yogyakarta. Ingin Kerjasama, Pasang Iklan, Membuat aplikasi Android atau Web? hubungi saya di candraadiputra (at) gmail (dot) com atau WA ke 081328533115

34 Comments

Anonymous · 18 June , 2019 at 10:42 pm

Masalahnya sama error di line 70 dan 71 gimana ini aduh ..? kalo error yaa komen cara ngatasinya .

andrifx · 27 March , 2017 at 3:36 pm

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

Anonymous · 31 January , 2017 at 2:25 am

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

Yo · 10 August , 2016 at 6:37 pm

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

martin · 5 July , 2016 at 12:37 pm

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

valentino dewa · 21 May , 2016 at 9:35 pm

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

Edi Ristanto · 15 April , 2016 at 8:48 am

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

juanda fifty mahardhika · 19 October , 2015 at 9:31 am

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

Rigen Richo Gito Onsu · 27 May , 2015 at 3:42 pm

bang gmana cara merubah jalur jalan yang akan ditentukan?

rigen · 27 May , 2015 at 3:25 pm

bang candra gimana cara buka sourcecodenyA?

Achmad Bin Warda'i · 25 May , 2015 at 4:30 am

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

ulum · 23 February , 2015 at 9:32 pm

mas caranya gimana membuat penunjuk jalanya dengan metode suara

    Candra Adi Putra · 24 February , 2015 at 10:31 am

    saya belum tahu klo berbasis web. klo suara bisanya berbasis android

Samuel · 11 November , 2014 at 5:34 pm

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

    Candra Adi Putra · 22 November , 2014 at 11:18 am

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

sapanawahyuoe · 8 November , 2014 at 7:02 pm

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

Fauji Rahman · 16 August , 2014 at 5:05 pm

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?

arka · 15 August , 2014 at 10:15 pm

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

    Umar Affiq · 7 September , 2014 at 12:21 am

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

kharisty · 2 August , 2014 at 2:16 am

makasi yaaa tutorialnya.. sangat membantu..

falah · 2 June , 2014 at 12:18 pm

makasih gan sangat bermanfaat buatku

falah · 25 January , 2014 at 5:49 pm

makasih mas sangat membantu sekali

Christina · 29 August , 2013 at 8:16 am

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

andre · 3 August , 2013 at 4:27 pm

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

umbu_awank · 3 August , 2013 at 5:34 am

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

eka · 25 June , 2013 at 7:44 am

caranya biar hasil petunjuk arahnya menggunakan bahasa indonesia gimana ya?

    Candra Adi Putra · 30 June , 2013 at 12:31 am

    baca referensinya di google map api

dewi · 21 June , 2013 at 8:32 am

gan ko ga jalan ya di lokal

    Candra Adi Putra · 23 June , 2013 at 12:24 am

    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 · 18 October , 2016 at 4:52 pm

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

HK47 · 6 May , 2013 at 10:13 am

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

    Candra Adi Putra · 8 May , 2013 at 11:44 pm

    kalo itu ane belum tahu.

    HK47 · 10 May , 2013 at 8:27 am

    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

b45r1 · 4 March , 2013 at 9:10 am

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

Tinggalkan Komentar plz!