kemarin saya sudah share tutorial cara merubah alamat menjadi latitude dan longitude di google maps kali ini saya akan share tutorial cara membuat petunjuk arah di google maps, petunjuk arah sendiri berfungsi untuk mengetahui jalan yang akan di lalui dari titik awal ke titik tujuan yang sudah di tentukan.
pertama buatlah project dengan nama terserah anda kemudian salin kode berikut dan simpan file dengan nama index.php
<!DOCTYPE html>
<html>
<head>
<title>MENAMPILKAN PETUNJUK ARAH DI GMAPS</title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js"></script>
<script type="text/javascript">
function init(){
var service = new google.maps.DirectionsService;
var view = new google.maps.DirectionsRenderer;
var info_window = new google.maps.InfoWindow();
var zoom = 5;
var pos = new google.maps.LatLng(-3.050444,116.323242);
var options = {
'center': pos,
'zoom': zoom,
'mapTypeId': google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById('maps'), options);
view.setMap(map);
info_window = new google.maps.InfoWindow({
'content': 'loading...'
});
var result = function(){
lihat(service, view);
}
document.getElementById('lihat').addEventListener('click', result)
}
function lihat(service, view){
var start = document.getElementById('start').value;
var end = document.getElementById('end').value;
var request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode.DRIVING
};
service.route(request, function(response, status){
if(status == google.maps.DirectionsStatus.OK){
view.setDirections(response);
}else{
window.alert('Directions request failed due to ' + status);
}
});
}
google.maps.event.addDomListener(window, 'load', init);
</script>
</head>
<body>
<div id="maps" style="width: 800px; height: 400px;"></div>
<input type="text" id="start" size="50" placeholder="Lokasi sekarang">
<input type="text" id="end" size="50" placeholder="Tujuan">
<button id="lihat">lihat</button>
</body>
</html>
keterangan : - anda bisa merubah jalan berdasarkan transportasi yang akan di gunakan, ada 4 travelMode, google.maps.TravelMode.DRIVING default dari google, google.maps.TravelMode.BICYCLING, google.maps.TravelMode.TRANSIT dan google.maps.TravelMode.WALKING, anda bisa menggunakan salah satu 4 travelMode, tergantung kebutuhan anda.
Ok, sampai disini dulu tutorial kali ini, selamat mencoba dan semoga barmanfaat.
Maps saya erorr
ReplyDelete