0
Kelompok 5, MCC-10-01Rich Internet Application
Deskripsi0 Pemanfaatan Google Maps API dalam website0 Fitur yang dimanfaatkan:   0 Menampilkan map   0 Menampilkan rute da...
Tampilan Awal
HTMLSecara garis besar map tersebut terbagi 3 bagian, yaitu: 1. canvas, untuk menggambar peta  <div id="map_canvas" style=...
3. control panel, untuk memilih asal, tujuan, dan mode travel<div id="control" style="width:60%">      <strong> Start: </s...
Script<script type="text/javascript"src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDo3H2Vp8EMjfOtP5kjyyrtC9zX83***...
Inisialisasi dan Opsi Mapfunction initialize() {   var rendererOptions = {   draggable: true   };   directionsDisplay = ne...
Tipe Map0 MapTypeId.ROADMAP   menampilkan   map   tipe  jalanan0 MapTypeId.SATELLITE menampilkan gambar dari  satelit0 Map...
map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);  directionsDisplay.setMap(map); directionsDi...
Fungsi Menghitung Jarakfunction calcRoute() {     var start = document.getElementById("start").value;     var end = docume...
Waypoints digunakan sebagai titik pemberhentian yang diset secara manualtravelMode diset ke DRIVING, karena travel mode it...
else {     var request = {           origin: start,           destination: end,           travelMode: google.maps.TravelMo...
Catatan0 Untuk    mendapatkan Google API Key, silakan  kunjungi: https://code.google.com/apis/console/0 Untuk mendapatkan ...
Referensi0 https://developers.google.com/maps/documentation  /javascript/directions0 https://developers.google.com/maps/do...
Akhirslide
Upcoming SlideShare
Loading in...5
×

Pemanfaatan Google Maps API

253

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
253
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
13
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Pemanfaatan Google Maps API"

  1. 1. Kelompok 5, MCC-10-01Rich Internet Application
  2. 2. Deskripsi0 Pemanfaatan Google Maps API dalam website0 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. 3. Tampilan Awal
  4. 4. HTMLSecara 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. 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. 6. Script<script type="text/javascript"src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDo3H2Vp8EMjfOtP5kjyyrtC9zX83******&sensor=true"></script>Kode unik yang bergaris bawah merupakan API Key dan akan berbeda tiap akun Googlesensor mengindikasikan apakah aplikasi menggunakan GPS untuk menentukan lokasi pengguna atau tidakvar 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. 7. 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, jugawaypoints
  8. 8. Tipe Map0 MapTypeId.ROADMAP menampilkan map tipe jalanan0 MapTypeId.SATELLITE menampilkan gambar dari satelit0 MapTypeId.HYBRID gabungan dari ROADMAP dan SATELLITE0 MapTypeId.TERRAIN menampilkan map fisikal berdasarkan informasi daratan
  9. 9. map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); directionsDisplay.setMap(map); directionsDisplay.setPanel(document.getElementById("directionsPanel") ); } //end of initializeKode di atas berfungsi untuk menggambar map pada map_canvas danmenampilkan panel petunjuk jalan pada directionsPanel
  10. 10. 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 JIKAawal(start) = “Mal Ratu Indah”, tujuan(end)=“Jalan Racing Centre 2, Makassar”dan travel mode(selectedMode)=“Angkot”
  11. 11. Waypoints digunakan sebagai titik pemberhentian yang diset secara manualtravelMode 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 mapFungsi calcRoute()akan dijalankan bila tombol “Submit” pada Control Panel ditekan
  12. 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 calcRouteJika start, end dan travelMode tidak sesuai dengan kondisi if, maka valueyang ada akan dijalankan seperti biasa tanpa waypoints dan rute akandigambarkan jika respon yang dikembalikan adalak “OK”.
  13. 13. 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/getLatLng0 Location / value alamat pada program ini menggunakan sistem address dan bukan LatLng0 Full code: http://db.tt/SHaOXtmV (ubah “YOUR_KEY_HERE” pada kode menjadi Google API Key Anda)
  14. 14. Referensi0 https://developers.google.com/maps/documentation /javascript/directions0 https://developers.google.com/maps/documentation /javascript/geocoding
  15. 15. Akhirslide
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×