Rute dengan banyak tujuan dengan google map api
Menanggapi pertanyaan di komentar pada postingan ini.
Mengenai bagaimana menentukan rute untuk tujuan lebih dari satu titik pada google map api.
Berikut script nya.
Semoga bermanfaat.
Mengenai bagaimana menentukan rute untuk tujuan lebih dari satu titik pada google map api.
Berikut script nya.
<!DOCTYPE html>
<html>
<head>
<title>ROUTE MAP</title>
<style type="text/css">
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#map_canvas {
height: 100%;
}
</style>
</head>
<body>
<div id="map_canvas">
</div>
</body>
<script type="text/javascript" src="http://maps.google.com/maps/api/js"></script>
<script type="text/javascript">
//DUA VARIABLE BERIKUT DIPERLUKAN UNTUK RUTE
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
(function() { // fungsi untuk dijalankan ketika halaman web dubuka
var infowindow = null;
initialize(); // mengeksekusi fungsi initialize()
})();
function initialize() {
//BARIS DIBAWAH INI JUGA DIPERLUKAN UNTUK RUTE
directionsDisplay = new google.maps.DirectionsRenderer();
// Baris berikut digunakan untuk mengisi marker atau tanda titik di peta
var sites = [
['Polinela', -5.358725,105.233413 ,1, '<h4>Politeknik Negeri Lampung</h4><p>Keterangan didalam marker</p>'], // pertama merupakan judul market, kedua adalah titik koordinan latitude, ketiga longitude, dan keempat merupakan z index (titik mana yang ditampilkan lebih dulu) untuk menentukan titik mana diatas titik mana, ketiga merupakan isi keterangan marker nya.
['Unila', -5.364505,105.243442 ,2, '<h4>Universitas Lampung</h4><p>Keterangan didalam marker</p>'],
['DJ',-5.3745833,105.2425024,3,'<h4>IBI DARMAJAYA</h4><p>Keterangan untuk marker</p>'],
['Rumah Sakit Advent',-5.392718, 105.261890,3,'<h4>Rumah Sakit Advent</h4><p>Keterangan untuk marker</p>']
];
var centerMap = new google.maps.LatLng(-5.364505,105.243442); // mengatur pusat peta
var myOptions = {
zoom: 15, // level zoom peta
center: centerMap, // setting pusat peta ke centerMap
mapTypeId: google.maps.MapTypeId.ROADMAP //menentukan tipe peta
}
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions); //menempatkan peta pada div dengan ID map_canvas di html
//BARIS DIBAWAH INI UNTUK MELETAKKAN RUTE PADA MAP "map_canvas" ^
directionsDisplay.setMap(map);
// setMarkers(map, sites); // memanggil fungsi setMarker untuk menandai titik di peta.
infowindow = new google.maps.InfoWindow({
content: "loading..."
});
var bikeLayer = new google.maps.BicyclingLayer();
bikeLayer.setMap(map); //memnunculkan peta
//BARIS DIBAWAH INI UNTUK MEMANGGIL FUNGSI calcRoute()
calcRoute();
}
//FUNGSI CALCROUTE UNTUK MENGGAMBAR RUTE DARI TITIK A KE TITIK B / START ke END
function calcRoute() {
var start = '-5.358725,105.233413'; // Titik Start
var end = '-5.3745833,105.2425024'; //Titik Akhir
//================Tambahan dari tutorial sebelumnya==========================
var daftartujuan = ["-5.358725,105.233413", "-5.364505,105.243442", "-5.3745833,105.2425024","-5.392718, 105.261890"];
var jalur = [];
for (var i = 0; i < daftartujuan.length; i++) {
var address = daftartujuan[i];
if (address !== "") {
jalur.push({
location: address,
stopover: true
});
}
}
//===========================================
var request = {
origin:start,
destination:end,
//============Uni juga tambahan untuk jalur=======
waypoints: jalur,
optimizeWaypoints: false, //true untuk membiarkan google menentukan jalur terpendek. false untuk jalur berdasarkan uturan yang kita tentukan
//===================
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(request, function(result, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(result);
}
});
}
function setMarkers(map, markers) {
//berikut merupakan perulangan untuk membaca masing masing titik yang telah kita definisikan di sites[];
for (var i = 0; i < markers.length; i++) {
var sites = markers[i];
var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
var marker = new google.maps.Marker({
position: siteLatLng,
map: map,
title: sites[0],
zIndex: sites[3],
html: sites[4]
});
var contentString = "Some content";
// berikut merupakan fungsi untuk mengatur agar keterangan marker muncuk ketika mouse diarahkan ke marker (mouse over)
google.maps.event.addListener(marker, "mouseover", function () {
infowindow.setContent(this.html);
infowindow.open(map, this);
});
}
}
</script>
</html>
Semoga bermanfaat.
.png)
Comments
Post a Comment