Google Maps info window not displaying on first mouse over - google-maps

Question

I have a Google map that pulls data from a database. Everything works like it's supposed to, except for the info window that pops up when you mouse over a certain point on the map (this point is part of a set that gets pulled from a database. So there can be any number of points at any given stage).
My code looks like this:
function getwindow(id) {
if(infowindows[id] == null || infowindows[id] == '') {
$.ajax({
url: "view/"+id,
type: "post",
async: true,
beforeSend: function() {
},
success: function(data) {
data = JSON.parse(data);
if(data.success) {
infowindows[id] = '<b>Info For: </b>' + data.Clinic.official_clinic_name + '<br/>' +
'{{image}}<br/>' +
'Tel: ' + data.Clinic.telephone;
} else {
alert('error');
}
}
});
}
}
var infowindow = new google.maps.InfoWindow({
content: ''
});
<?php foreach($jsdata as $data) : ?>
infowindows[<?php echo $data['id'];?>] = '';
google.maps.event.addListener(marker_<?php echo $data['id'];?>, 'mouseover', function() {
getwindow(<?php echo $data['id'];?>);
infowindow.setContent(infowindows[<?php echo $data['id'];?>]);
infowindow.open(map,marker_<?php echo $data['id']?>);
});
google.maps.event.addListener(marker_<?php echo $data['id'];?>, 'mouseout', function() {
infowindow.close();
});
<?php endforeach; ?>
The issue I'm having is that the popup info window does not display the first time. If I hover over it a second time, it works perfectly. How do I make it so it shows up the first time?

Answer 1

Because of asynchronous $.ajax call infoWindow content is not available at the time of the first mouseover event. You have to move definition of event handler into success: part of code.