Beberapa hari yang lalu ada salah seorang dari pembaca blog ini mengirimkan email kepada saya menanyakan tentang bagaimana menambahkan atau membuat rute dari gedung A ke gedung B. Atau dari koordinat A ke koordinat B.
Bukanya pelit untuk membalas email, tetapi saya rasa jauh lebih baik jika saya bagikan di blog saja, supaya apabila ada yang membutuhkan tinggal comot di blog ini.
Baiklah langsung saja kita buat rute di web gis google map kita.
Dalam praktik untuk tulisan kali ini saya menggunakan sourcecode dari tulisan sebelumnya
di sini dengan sedikit modifikasi tentunya.
Berikut contoh script untuk menampilkan rute pada peta gis google map kita.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124 | <!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>']
];
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';
var end = '-5.3745833,105.2425024';
var request = {
origin:start,
destination:end,
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>
|
Disetiap Baris yang saya tambahkan untuk memunculkan rute di peta telah saya tambahkan komentar. sehingga sobat bisa membedakan perubahan/modifikasi yang saya buat dari script pada tutorial sebelumnya sehingga bisa menampilkan rute atau track dari satu titik ke titik lain.
sekian, semoga bermanfaat.
.png)
Comments
Post a Comment