1. 1 Bus Tracker A Google Maps Application

2. 22 Objectives You will be able to Add an icon to a map created with the Google Maps API. Use Ajax techniques to get a map location from a web application. Position the icon on the map at a specified latitude and longitude. Update the map periodically.

3. 3 USF BullTracker http://www.usfbullrunner.com/map

4. 44 The Bus Tracking Application Buses carry GPS devices to track their positions. Periodically report positions to a web server. Web server makes bus positions available to clients via HTTP requests. We will use simulated data. Client browsers display map showing position of bus. Updated periodically

5. 55 Implementing the Bus Tracker Download and expand: http://www.csee.usf.edu/~turnerr/Web_Application_Design/Downloads/ 260_Google_Maps/ http://www.csee.usf.edu/~turnerr/Web_Application_Design/Downloads/ 260_Google_Maps/ File bus_tracker_2016.zip Make Internet Explorer the default browser. Open web site in Visual Studio

6. 66 bus_tracker.aspx Determines simulated position of bus on route. Array route has lat-long of 90 positions along route Roughly equal intervals Total time to complete route route_time = 100 seconds (Unrealistically fast!) Current array index = (Time into current cycle / cycle time) * array length

7. 77 bus_tracker.aspx.cs Scroll down

8. 88 bus_tracker.aspx.cs Try it!

9. 99 bus_tracker.aspx

10. 10 Displaying the Bus Location Use a Google Maps Marker to show bus position. https://developers.google.com/maps/documentation/javascript /reference#Marker https://developers.google.com/maps/documentation/javascript /reference#Marker

11. 11 MarkerOptions https://developers.google.com/maps/documentation/javascript/reference#MarkerOptions Scroll Down

12. MarkerOptions 12

13. 13 The MarkerImage Class https://developers.google.com/maps/documentation/javascript/reference#MarkerImage

14. 14 The LatLng Class https://developers.google.com/maps/documentation/javascript/reference#LatLng

15. 15 Displaying the Bus Location Add jQuery to website Download if necessary http://docs.jquery.com/Downloading_jQuery#Download_jQuery Add to website

16. 16 bus_viewer.js var map; var bus; function initMap() { var latitude = 28.06410; var longitude = -82.4180; var campus_center = new google.maps.LatLng(latitude, longitude) var myOptions = { zoom: 15, center: campus_center, mapTypeId: google.maps.MapTypeId.ROADMAP };

17. bus_viewer.js map = new google.maps.Map(document.getElementById("map"), myOptions); var image = new google.maps.MarkerImage("bus_marker_half_size.png", new google.maps.Size(23,21), new google.maps.Point(0,0), new google.maps.Point(6,10) ); bus = new google.maps.Marker({ position: { lat: 0.0, lng: 0.0 }, map: map, icon: image }); window.setTimeout(Move_Bus, 1000); } 17

18. 18 bus_viewer.js function Move_Bus() { $.get('bus_tracker.aspx', '', Set_Bus_Position); window.setTimeout(Move_Bus, 1000); // Call Move_Bus after 1.0 sec }

19. 19 bus_viewer.js function Set_Bus_Position(xml) { var latitude = $(xml).find('Lat').text(); var longitude = $(xml).find('Lng').text(); bus.position = new google.maps.LatLng(latitude, longitude); bus.setMap(map); }

20. 20 bus_viewer.html

21. 21 Set Start Page Set bus_viewer.html as the start page. Run the app.

22. 22 Bus Viewer Running