Auto-pan map to fit infoWindow after loading with content from ajax

Question

I use an implementation of google maps that loads markers on the map at locations determined by a php script that allows the user to filter though points of interest based on search criteria dynamically. This is done with an ajax call to a php search script. These markers also have an attached infoWindow that is dynamically loaded with detailed information about the site by accessing a different php script. During the marker creation I use the following code:

// Initialize the info window
var InfoWindow = new google.maps.InfoWindow({ content: 'Display Error: Please Try Again', maxWidth: 400 });

// Lots of code to prep the search filters and now inside an $.ajax().done(function(html) { $('#ajaxStub div.stubCalc').each(function() {  } }) method

var newMarker = new google.maps.Marker({
    position: latlon,
    icon: $(this).find('.iconStub').text(),
    title: $(this).find('.nameStub').text(),
    map: gmap
});
// onClick show the InfoWindow
google.maps.event.addListener(newMarker, 'click', function(e) {
    InfoWindow.content = $('<div class="projectStub" guid=""></div>').attr('guid', guid).get(0);
    InfoWindow.open(gmap, newMarker);
    // loadStub(div, guid, [isToolbox], [callback()]) is defined in CalcInfo.js so that it can also be used by the Calculator Toolbox Page
    loadStub($('div.projectStub[guid="' + guid + '"]').get(), guid, false, function() {
        InfoWindow.setContent(InfoWindow.content);
    });
});

And the loadStub method so you can see makes an initial ajax call and preps for an ajax call for a file upload (thus the content of this infowindow is quite dynamic)

function loadStub(project, guid, isToolbox, callback) {
    if (typeof(isToolbox) === 'undefined') isToolbox = false;
    $(project).html('<img src="/Styles/images/ajax-loader.gif"/>');
    $.ajax({
        url: "/ajax.php?ajax=CalcInfo",
        type: "POST",
        data: { guid: guid, isToolbox: isToolbox.toString() },
        cache: false
    }).done(function(html) {
        $(project).html($(html).html());
        $(project).find('#fileInput').change(function() {
            // More code here to prepare for ajax upload
            $.ajax({
                url: "/ajax.php&ajax=Thumbnail&guid=" + guid,
                type: "POST",
                data: formdata
            }).done(function(html) {
                if ($(html).find('#ajaxContent .error').length > 0) {
                    var errorMessage = 'The Server Returned the Following Error(s):\n';
                    $(html).find('#ajaxContent .error').each(function() {
                        errorMessage += $(this).text() + '\n';
                    });
                    errorMessage += 'Please Try Again';
                    alert(errorMessage);
                }
            }).fail(function() {
                alert('There Was an Error Connecting to the Server. Please Try Again.');
            }).always(function() {
                loadStub();
            });
        });
        if (typeof callback == 'function') {
            callback();
        }
    }).fail(function() {
        $(project).html('<div style="margin: 75px 0; text-align: center;">There Was an Error Connecting to the Server<br/>Please Try Again</div>');
    });
}

I was able to determine that by using the setContent method instead of assigning InfoWindow.content google maps would adjust the InfoWindow size appropriately, but it does not pan the map to fit the contents of the InfoWindow as it does by default when using InfoWindow.open(). Does anyone know a decent work-around?

If I need to clarify anything, please let me know.

Thanks in advance.

Answer 1

Try calling InfoWindow.open(gmap, newMarker); again just after you set the content to you ajax result. The map will auto pan when the open method is called based on the content size, and it seems to be a usable workaround.

Answer 2

Even if your infowindow content is dynamic, you may be able to pick width and height values that are close to values when the content is loaded.

InfoWindow.content = $('<div class="projectStub" guid=""></div>').attr('guid', guid).get(0);

Here try to give projectSub a width and height value.

Another thing you can do: move the map to the point where your marker with the active infowindow will be in the center. This way, the marker will move a bit after the user has clicked, but your infowindow will definitely be fully visible.

loadStub($('div.projectStub[guid="' + guid + '"]').get(), guid, false, function() {
    InfoWindow.setContent(InfoWindow.content);
    gmap.panTo(newMarker.getPosition());
});