Direction
dengan google map dan php
Direction merupakan api
milik google map untuk menunjukan rute dan jarak dari satu tempat ke tempat
lain jadi ada dua inputan untuk menentukannya yaitu input kota asal dan kota
tujuan, ketik skrip dibawah ini untuk membuat input
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta
charset="utf-8">
<title>Google maps
</title>
<meta
name="viewport" content="width=device-width,
initial-scale=1.0">
<meta
name="description" content="">
<meta
name="author" content="">
<!-- Le styles -->
<link href="bootstrap.min.css"
rel="stylesheet">
<style
type="text/css"> body {
padding-top:
20px;
padding-bottom:
40px;
}
/* Custom
container */
.container-narrow
{
margin:
0 auto;
max-width:
700px;
}
.container-narrow
> hr {
margin:
30px 0;
}
/* Main
marketing message and sign up button */
.jumbotron {
margin:
60px 0;
text-align:
center;
}
.jumbotron
h1 {
font-size:
72px;
line-height:
1;
}
.jumbotron .btn
{
font-size:
21px;
padding:
14px 24px;
}
/*
Supporting marketing content */
.marketing {
margin:
60px 0;
}
.marketing p
+ h4 {
margin-top:
28px;
}
</style>
</head>
<body>
<div
class="container-narrow">
<div class="masthead">
<ul
class="nav nav-pills pull-right">
<!-------------start
menu ------- -->
<!-------------end
of menu ------- -->
</ul>
<h2
class="muted">Mail Hasan Blog </h2>
</div>
<hr>
<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'>
</div>
</div>
</body>
</html>
Simpan skrip nama diatas dengan nama index.php
Dari skrip diatas maka akan tampil seperti berikut,
pada skrip yang tercetal tebal di atas itu linl CSS untuk CSS bisa di download di link ini css ini merupakah hasil
cari di internet juga tapi anda tidak usaha bingung – bingung cari soalnya saya
sudah memberikan link downloadnya dan sudah disesuaikan dengan skrip diatas.
Setelah itu sebagamana bisanya suatu input
membutuhkan sebuah request untuk merespon dari inputan alamat asal dan alamat
yang dituju.
Tambah skrip
yang bercetak tebal pada skirp index.php
dengan skrip berikut.
<div
class='span8'>
//skirp
sebelumnya
<?php
if(isset($_POST)) {
$saddr = $_POST['asal'];
$daddr = $_POST['tujuan'];
include ('direction.php');
}?>
</div>
</div>
</body>
</html>
Setelah melakukan request kita akan menampilkannya
menggunakan file direction.php,
request dalam pemrograman php bisa menggunakan $_POST atau $_GET.
http://maps.google.com/maps/api/js?sensor=false
merupakan file request untuk menentukan arah dan rute antara kota misalnya kota
asal bondowoso dan kota tujuan malang, ketik skirp direction.php seperti berikut.
<!DOCTYPE
html>
<html>
<head>
<meta http-equiv="content-type"
content="text/html; charset=UTF-8"/>
<title>Peta</title>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=false"></script>
</head>
<body
style="font-family: Arial; font-size: 12px;">
<div class='row'>
<div id="panel" style="width: 300px;
float:left;"></div>
<div id="map" style="width: 300px; height: 400px;
float:right;"></div>
</div>
<script type="text/javascript">
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);
}
});
</script>
</body>
</html>
Setelah itu
coba dari dari semua hasil dari program semua diatas itu untuk memastikannya.
Input kota misalnya kota asal bondowoso dan kota
tujuan malang seperti gambar berkiut.
Itu klik rute maka akan tampil rute dan jarak dari
bondowoso ke malang seperti gambar berikut.
Pada gambar sebelah kiri merupakan keterangan jarak
dan gambar sebelah kanan ditampilkan menggunakan simplemmap(petadetail) dan
rute jalannya.
Semoga bermanfaat. . .!
nice gan
BalasHapusditunggu tutorial , pencarian menggunakan radius gan .makasih
BalasHapussangat membantu gan... thanks...
BalasHapussiang gan.... soryy.
BalasHapusko ane coba nggak mau tampil ya, padahal ane udah ikutin semua.
Help Me please... :-D
punya saya gak mau jalan gan
BalasHapus