pemanfaatan google maps api

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