Script Petunjuk Arah Direction Google Maps 4

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

Script Form

		<form class="form-inline" action='index.php' method="POST">
  <input type="text" name='asal' class="input-large" 
placeholder="Alamat asal">
  <input type="text"  name='tujuan'class="input-large" 
placeholder="Alamat Yang dituju">
 
  <button type="submit" class="btn btn-warning">Rute</button>
</form>
		
	<p class='lead'>
	Rute  Google maps
	</p>

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

Print PDF

Posts related to Script Petunjuk Arah Direction Google Maps

Dasar Dasar Google Maps API

Membuat Location Picker di Google map

Cara Input data lokasi di Google Map

Tutorial Inline Editing AJax PHP

Penulis: Candra Adi Putra

Candralab Coding Studio adalah sebuah startup yang bergerak dibidang pengembangan software yang fokus ke Web dan Mobile Development di Yogyakarta, Indonesia.

• Mail
|
• Twitter
|
• Google+