View
263
Download
4
Category
Preview:
Citation preview
Google Maps API; Directions
Denda Rizki P.
Muhammad Rizky F.
Muhammad Haerunnur S.
Kelompok 5, MCC-10-01Rich Internet Application
Deskripsi
0 Pemanfaatan Google Maps API dalam website0 Fitur yang dimanfaatkan:
0 Menampilkan map0 Menampilkan rute dan detail tujuan (dari asal sampai
tujuan)0 Draggable route0 Contoh pembuatan route angkot (custom route)
Tampilan Awal
HTML
Secara garis besar map tersebut terbagi 3 bagian, yaitu:
1. canvas, untuk menggambar peta
2. directions panel, untuk menampilkan petunjuk perjalanan
<div id="map_canvas" style="float:left;width:70%; height:90%"></div>
<div id="directionsPanel" style="float:right;width:30%;height:90%;overflow:auto;"></div>
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>
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
DirectionsService bertanggungjawab dalam menentukan jalur.Variabel politel berisikan latitude-longitude satu tempat; Politeknik Telkom
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDo3H2Vp8EMjfOtP5kjyyrtC9zX83******&sensor=true"></script>
var directionsDisplay;var directionsService = new google.maps.DirectionsService();var map;var politel = new google.maps.LatLng(-6.974990000000001, 107.63114599999994);
Inisialisasi dan Opsi Mapfunction 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 diubahDirectionsRenderer berfungsi untuk menghubungkan awal dan tujuan, juga waypoints
Tipe Map
0MapTypeId.ROADMAP menampilkan map tipe jalanan
0MapTypeId.SATELLITE menampilkan gambar dari satelit
0MapTypeId.HYBRID gabungan dari ROADMAP dan SATELLITE
0MapTypeId.TERRAIN menampilkan map fisikal berdasarkan informasi daratan
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
Fungsi Menghitung Jarakfunction 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”
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
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”.
Catatan0 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)
Referensi
0 https://developers.google.com/maps/documentation/javascript/directions
0 https://developers.google.com/maps/documentation/javascript/geocoding
Akhir slide
Recommended