While working on integrating the google maps api v3, I encountered an issue when trying to pass an XML file to populate the map with results. Upon checking the PHP file responsible for generating the XML data, everything seems to be in order. The PHP file is located in the same directory as my HTML file. It appears that the problem lies within the function called downloadUrl. When debugging, the status returned for request.readyState transitions from 0 to 1 but never reaches 4. Is there something I'm missing here?
The input data for searchLocationsNear is accurate. The value of center is: results[0].geometry.location.
Below are two functions being utilized:
function searchLocationsNear(center) {
var radius = document.getElementById('radiusSelect').value;
var st = document.getElementById('studyTopicSelect').value;
var searchUrl = 'phpsqlsearch_genxml.php?lat=' + center.lat() + '&lng=' + center.lng()
+'&lat=' + center.lat() + '&radius=' + radius + '&studytopic=' +st;
// Issue here. The XML file does not load after it's generated.
downloadUrl(searchUrl, function(data) {
var xml = data.responseXML;
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var username = markers[i].getAttribute("username");
var studytopic = markers[i].getAttribute("studytopic");
var distance = markers[i].getAttribute("distance");
var point = new google.maps.LatLng(
parseFloat(markers[i].getAttribute("lat")),
parseFloat(markers[i].getAttribute("lng")));
var html = "<b>" + username + "</b> <br/>" + studytopic;
var icon = customIcons[type] || {};
var marker = new google.maps.Marker({
map: map,
position: point,
icon: icon.icon,
shadow: icon.shadow
});
bindInfoWindow(marker, map, infoWindow, html);
}
});
}
The second function:
function downloadUrl(url,callback) {
var request = window.ActiveXObject ?
new ActiveXObject('Microsoft.XMLHTTP') :
new XMLHttpRequest;
request.onreadystatechange = function() {
if (request.readyState == 4) {
request.onreadystatechange = doNothing;
callback(request, request.status);
}
else if (request.readyState == 1) {
request_loading();
}
};
request.open('GET', url, true);
request.send(null);
}
function request_loading() {
$('#loading').html('<p><img src="/ing/loading.gif" width="43" height="11" /></p>');
}
function bindInfoWindow(marker, map, infoWindow, html) {
google.maps.event.addListener(marker, 'click', function() {
infoWindow.setContent(html);
infoWindow.open(map, marker);
});
}