1 Bus Tracker A Google Maps Application

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 USF BullTracker

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

55 Implementing the Bus Tracker Download and expand: 260_Google_Maps/ 260_Google_Maps/ File bus_tracker_2016.zip Make Internet Explorer the default browser. Open web site in Visual Studio

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

77 bus_tracker.aspx.cs Scroll down

88 bus_tracker.aspx.cs Try it!

99 bus_tracker.aspx

10 Displaying the Bus Location Use a Google Maps Marker to show bus position. /reference#Marker /reference#Marker

11 MarkerOptions Scroll Down

MarkerOptions 12

13 The MarkerImage Class

14 The LatLng Class

15 Displaying the Bus Location Add jQuery to website Download if necessary Add to website

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

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 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 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 bus_viewer.html

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

22 Bus Viewer Running