Could it be a scope issue? Feel free to correct me if I'm mistaken.
I've got a for loop that's placing markers on my map. Each marker has a different infowindow that loads content using ajax callbacks.
This is a simplified version of the script with the problem highlighted:
var xhr = "";
var infowindow = new google.maps.InfoWindow();
var marker, i;
var polylineCoordinates = [new google.maps.LatLng(78.782762, 17.917843),
new google.maps.LatLng(-0.829439, -91.112473),
new google.maps.LatLng(15.066156, -23.621399),
]
function createHttpRequest() {
try {
xhr = new XMLHttpRequest();
return xhr;
}
catch (e)
{
//assuming IE6
try {
xhr = new activeXBbject("microsoft.XMLHTTP");
return xhr;
}
catch (e) {
return alert("Unable to create an XMLHttpRequest object");
}
}
}
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(78.782762,17.917843),
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
for (i = 0; i < polylineCoordinates.length; i++) {
marker = new google.maps.Marker({
position: polylineCoordinates[i],
map: map
});
google.maps.event.addListener(marker, 'click', (function (marker, i) {
return function () {
infowindow.setContent("<div id=\"infowindow\">" + getStationInfo(infoWindowDiv) + "</div>");
infowindow.open(map, marker);
}
})(marker, i));
}
function infoWindowDiv(stationInfo) {
var add = document.createTextNode(stationInfo);
document.getElementById("infowindow").appendChild(add);
}
function getStationInfo(callback) {
var xhr = createHttpRequest();
var url = "stations.php"
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var stationInfo = "This is a Test";
return callback(stationInfo)
}
}
xhr.open("GET", url, true);
xhr.send(null);
}
Small Edit: Functions have been moved outside of the loop
Edit 2: The ajax call isn't the issue, the URL was changed just for the code sample. The final output displays "This is a test" in the infowindow, indicating a successful callback. Additionally, note there is no responseText or responseXml involved. The returned variable is not related to the URL
The callback seems to be working fine, but there's an unwanted 'undefined' displayed above it.
The console doesn't show any errors.
Output:
undefined
This is a test
If it's functioning, why does it display as undefined?