Dokumen tersebut menjelaskan cara membuat aplikasi peta interaktif menggunakan Google Maps API untuk menampilkan peta, rute perjalanan, dan detail tujuan. Terdiri dari canvas untuk menampilkan peta, panel petunjuk, dan panel kontrol untuk memilih asal dan tujuan. Menggunakan fungsi DirectionsService dan DirectionsRenderer untuk menghitung dan menampilkan rute, serta bisa menampilkan rute khusus angkot dengan menentukan waypoints.

1. Kelompok 5, MCC-10-01
Rich Internet Application

2. Deskripsi
0 Pemanfaatan Google Maps API dalam website
0 Fitur yang dimanfaatkan:
0 Menampilkan map
0 Menampilkan rute dan detail tujuan (dari asal sampai
tujuan)
0 Draggable route
0 Contoh pembuatan route angkot (custom route)

3. Tampilan Awal

4. HTML
Secara garis besar map tersebut terbagi 3 bagian, yaitu:
1. canvas, untuk menggambar peta
<div id="map_canvas" style="float:left;width:70%; height:90%"></div>
2. directions panel, untuk menampilkan petunjuk perjalanan
<div id="directionsPanel" style="float:right;width:30%;height:90%;overflow:auto;">
</div>

5. 3. control panel, untuk memilih asal, tujuan, dan mode travel
<div id="control" style="width:60%">
<strong> Start: </strong>
<select id="start">
<option value="Bandung, West Java">Bandung</option>
<option value="Jakarta">Jakarta</option>
<option value="Politeknik Telkom">Politeknik Telkom, Bandung</option>
<option value="Mal Ratu Indah, Jalan Doktor Sam Ratulangi, Mariso, Indonesia">Mall Ratu Indah,
Makassar</option>
<option value="Jalan Racing Centre 2, Makassar">Jalan Racing Centre 2, Makassar</option>
<option value="Wigram Road, Forest Lodge, New South Wales, Australia">Wigram Road, Australia</option>
</select>
<strong> End: </strong>
<select id="end">
<option value="Bandung, West Java">Bandung</option>
<option value="Jakarta">Jakarta</option>
<option value="Politeknik Telkom, Bandung">Politeknik Telkom, Bandung</option>
<option value="Mal Ratu Indah, Jalan Doktor Sam Ratulangi, Mariso, Indonesia">Mall Ratu Indah,
Makassar</option>
<option value="Jalan Racing Centre 2, Makassar">Jalan Racing Centre 2, Makassar</option>
<option value="Wilson Street, Newtown, New South Wales, Australia">Wilson Street, Australia</option>
</select>
<strong> Mode of Travel: </strong>
<select id="mode">
<option value="DRIVING">Driving</option>
<option value="WALKING">Walking</option>
<option value="BICYCLING">Bicycling</option>
<option value="TRANSIT">Transit</option>
<option value="ANGKOT">Angkot</option>
</select>
<input type="button" onClick="calcRoute();" value="Submit"/>
</div>

6. Script
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDo3H2Vp8EMjfOtP5k
jyyrtC9zX83******&sensor=true"></script>
Kode unik yang bergaris bawah merupakan API Key dan akan berbeda tiap akun
Google
sensor mengindikasikan apakah aplikasi menggunakan GPS untuk menentukan
lokasi pengguna atau tidak
var directionsDisplay;
var directionsService = new google.maps.DirectionsService();
var map;
var politel = new google.maps.LatLng(-6.974990000000001,
107.63114599999994);
DirectionsService bertanggungjawab dalam menentukan jalur.
Variabel politel berisikan latitude-longitude satu tempat; Politeknik Telkom

7. Inisialisasi dan Opsi Map
function initialize() {
var rendererOptions = {
draggable: true
};
directionsDisplay = new google.maps.DirectionsRenderer(rendererOptions);
var mapOptions = {
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP,
center: politel
}
draggable:true membuat rute pada map dapat diubah
DirectionsRenderer berfungsi untuk menghubungkan awal dan tujuan, juga
waypoints

8. Tipe Map
0 MapTypeId.ROADMAP menampilkan map tipe
jalanan
0 MapTypeId.SATELLITE menampilkan gambar dari
satelit
0 MapTypeId.HYBRID gabungan dari ROADMAP dan
SATELLITE
0 MapTypeId.TERRAIN menampilkan map fisikal
berdasarkan informasi daratan

9. map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
directionsDisplay.setMap(map);
directionsDisplay.setPanel(document.getElementById("directionsPanel")
);
} //end of initialize
Kode di atas berfungsi untuk menggambar map pada map_canvas dan
menampilkan panel petunjuk jalan pada directionsPanel

10. Fungsi Menghitung Jarak
function calcRoute() {
var start = document.getElementById("start").value;
var end = document.getElementById("end").value;
var selectedMode = document.getElementById("mode").value;
if (start=="Mal Ratu Indah, Jalan Doktor Sam Ratulangi, Mariso, Indonesia" && end == "Jalan Racing Centre 2, Makassar" &&
selectedMode=="ANGKOT"){
var requestAngkot = {
origin: start,
destination: end,
waypoints:[{location: "Jalan Jenderal Sudirman, Makassar, South Sulawesi, Indonesia"}, {location: "Jalan Pangeran Diponegoro,
Makassar, South Sulawesi"}, {location: "Jalan Jenderal Urip Sumohardjo, Makassar, South Sulawesi, Indonesia"}, {location: "Jalan Racing
Centre 2, Makassar, South Sulawesi, Indonesia"}],
travelMode: google.maps.TravelMode.DRIVING
};
directionsService.route(requestAngkot, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
Kode di atas berfungsi untuk menggambarkan jalur khusus angkot JIKA
awal(start) = “Mal Ratu Indah”, tujuan(end)=“Jalan Racing Centre 2, Makassar”
dan travel mode(selectedMode)=“Angkot”

11. Waypoints digunakan sebagai titik pemberhentian
yang diset secara manual
travelMode diset ke DRIVING, karena travel mode
itulah yang paling mendekati tipe “Angkot”
Setelah route yang dikirim ke DirectionsService
diterima dan menghasilkan respon “OK”, barulah rute
akan digambarkan di map
Fungsi calcRoute()akan dijalankan bila tombol
“Submit” pada Control Panel ditekan

12. else {
var request = {
origin: start,
destination: end,
travelMode: google.maps.TravelMode[selectedMode]
};
directionsService.route(request, function(response, status) {
if (status == google.maps.DirectionsStatus.OK) {
directionsDisplay.setDirections(response);
}
});
}
} //end of calcRoute
Jika start, end dan travelMode tidak sesuai dengan kondisi if, maka value
yang ada akan dijalankan seperti biasa tanpa waypoints dan rute akan
digambarkan jika respon yang dikembalikan adalak “OK”.

13. Catatan
0 Untuk mendapatkan Google API Key, silakan
kunjungi: https://code.google.com/apis/console/
0 Untuk mendapatkan Latitude-Longitude, kami
menggunakan HTML geocoding yang telah kami
buat di file terpisah: http://bit.ly/getLatLng
0 Location / value alamat pada program ini
menggunakan sistem address dan bukan LatLng
0 Full code: http://db.tt/SHaOXtmV (ubah
“YOUR_KEY_HERE” pada kode menjadi Google API
Key Anda)

14. Referensi
0 https://developers.google.com/maps/documentation
/javascript/directions
0 https://developers.google.com/maps/documentation
/javascript/geocoding

15. Akhir
slide