Experimenting with extracting JSON data from a bus tracker website and integrating it into my own version using Google Maps. Although not as visually appealing, I'm struggling to update an infowindow while it remains open. Despite finding some examples online, nothing seems to work as desired. While I've successfully managed to update and move the markers with each new dataset, the infowindows aren't behaving the way I want them to. What I aim for is to click on a marker and have the infowindow display additional information, such as the vehicle's speed. As the JSON updates and downloads, the marker shifts position and I expect the content of the infowindow to reflect the new speed in real-time without closing.
As an added challenge, I aspire to implement a toggle feature for the runbuses() function using a checkbox. When unchecked, this option would halt the download of new JSON data. However, figuring out how to achieve this functionality still eludes me. It has been quite enjoyable delving into Java and exploring these complexities!
function runbuses() {
setInterval(function() {
loadbus(map)
}, 5000);
}
function loadbus(map) {
//howardshuttle.com
$.ajax({
url: "http://www.howardshuttle.com/Services/JSONPRelay.svc/GetMapVehiclePoints",
data: 'ApiKey=8882812681',
dataType: 'jsonp',
jsonp: 'method',
async: false,
cache: false,
success: function(obj) {
for (var i = 0; i < obj.length; i++) {
var image = {
url: setumicon(obj[i]['Heading']),
anchor: new google.maps.Point(20, 20),
scaledSize: new google.maps.Size(40, 40)
}
console.log(obj[i].Name);
if (umbuses.hasOwnProperty(obj[i].Name)) {
umbuses[obj[i].Name].setPosition(new google.maps.LatLng(obj[i].Latitude, obj[i].Longitude));
umbuses[obj[i].Name].setIcon(image);
console.log(Math.round(obj[i]['GroundSpeed']));
console.log('has prop');
} else {
var hover = obj[i].Name;
console.log('new');
var image = {
url: setumicon(obj[i].Heading),
anchor: new google.maps.Point(20, 20),
scaledSize: new google.maps.Size(40, 40)
}
marker = new google.maps.Marker({
position: new google.maps.LatLng(obj[i].Latitude, obj[i].Longitude),
map: map,
icon: image,
title: String(hover)
});
google.maps.event.addListener(marker, 'click', (function(marker, i) {
return function() {
if (activeInfoWindow != null) activeInfoWindow.close();
uminfo.setContent("<p>" + obj[i]['Name'] + "<br />" + umFindroute(obj[i]['RouteID']) + "<br />" +
"Speed: " + Math.round(obj[i]['GroundSpeed']) + " mph" + "</p>");
uminfo.open(map, marker);
activeInfoWindow = uminfo;
}
})(marker, i));
umbuses[obj[i].Name] = marker;
console.log(umbuses);
}
}
},
error: function(XMLHttpRequest, textStatus, errorThrown) {
alert("some error");
}
});
}