Google Maps info window not displaying on first mouse over

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.