My current challenge involves loading markers on a Google map using an ajax call. The issue I am facing is that the ajax call takes a long time to complete, but the map loads before it finishes. As a result, I do not see the markers on the map.
Below is the code snippet:
<script type="text/javascript">
var map;
function initialize() {
var myLatlng;
var mapOptions;
myLatlng = new google.maps.LatLng("29.9844", "-95.33389");
mapOptions = {
zoom: 12,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP };
map = new google.maps.Map(
document.getElementById("map-canvas"), mapOptions);
google.maps.event.addListenerOnce(map, 'idle', function() {
getRegions( function( result ) {
alert("getRegions callback return value : " + result.regionList );
addMarkersAtRegionCenter(result );
});
});
}
</script>
function addMarkersAtRegionCenter(result) {
var length = result.regionList.length;
for(var i=0; i<length; i++)
{
var image = result.regionList[i].imageIcon;
var marker = new google.maps.Marker({
position: new google.maps.LatLng(result.regionList[i].centerLatitude,result.regionList[i].centerLongitude),
icon: image,
map: map
});
google.maps.event.addListener(marker, 'click', (function(marker, i) { return function() {
window.location.href = marker.url;
}
})(marker, i));
}
}
function getRegions(regions, callbackRegions) {
$.ajax({
type : 'POST',
url : 'getRegions.jsp',
data : {regions: regions},
dataType: "json",
success : function(result, textStatus, jqXHR) {
// invoke the callback function here
callbackRegions(result);
},
error: function (result, textStatus, errorThrown) {
// invoke the callback function here
callbackRegions(result);
}
});
}
Despite receiving response from the server and being able to view it in the browser, I am unable to display this response in the alert message within the above code block. Here's the response I received:
{"regionList":[{"centerLongitude":-95.34890747070312,"imageIcon":"../images/untested-icon.png","centerLatitude":29.980682373046875},{"centerLongitude":-95.34890747070312,"imageIcon":"../images/untested-icon.png","centerLatitude":29.988117218017578},{"centerLongitude":-95.33389282226562,"imageIcon":"../images/untested-icon.png","centerLatitude":29.980682373046875},{"centerLongitude":-95.33389282226562,"imageIcon":"../images/untested-icon.png","centerLatitude":29.988117218017578}]}
If you have any insights on what might be causing this issue, your assistance would be greatly appreciated.