Google Maps StreetView仅首次显示

Question

I have a google map page populated with markers from database. In the marker InfoWindow is a clickable link that opens a jquery dialog with StreetView of the location. The problem is, that StreetView shows only the first time I click on the InfoWindow link. If I close the dialog and try to open it again (clicking on other infowindows or even the same one again) , I get my dialog with StreetView controls , the new address is shown too (with "Address is approximate") , but the rest of dialog is an uniform light grey color.

I've tried some warkarounds posted on stackoverflow (like this one ) but the grey dialog persists in my case.

Edit : JSFiddle Example

Marker creation with onclick listener:

function addMarker(feature) {
    var marker = new google.maps.Marker({
        position: feature.position,
        icon: icons[feature.type].icon,
        map: map
    });
    //Create Infowindow
    var infowindow = new google.maps.InfoWindow();
    var content = '<h1 id="Heading" class="Heading">' + feature.shopName + '</h1>' +
                  '<div id="iwcontent" class="iwcontent">'+
                  '<p><b>Naslov : </b>' + feature.shopAddress + '</br>' +
                  '<p><b>Telefon : </b>' + feature.shopTel + '</br>' +
                  '</div>'+
                  '<div id="iwsw" class="iwsw">StreetView</div>'
                  ;
    //Call StreetView
    google.maps.event.addDomListener(infowindow, 'domready', function () {
        $('.iwsw').click(function () {
            showStreetView(feature.position);
        });
    });
    .
    .
    .

showStreetView function:

//Display dialog with streetview
function showStreetView(position){
    var panoramaOptions = {position: position, pov: {heading: 34,pitch: 10}};
    var panorama = new  google.maps.StreetViewPanorama(document.getElementById("dialog-sw-canvas"), panoramaOptions);
    map.setStreetView(panorama);
    $( "#dialog-sw-canvas" ).dialog("open");
}

Dialog definition:

$(function(){
    $('#dialog-sw-canvas').dialog({
        title: 'Street View',
        width: 1024,
        height: 768,
        closed: true,
        cache: false,
        modal: true,
        onClose: function(){
            $('#dialog-sw-canvas').empty();
        }
    });
});

Everything works like a charm, but only once.

Answer 1

Trigger the resize-event of the panorama after opening the dialog, then the API will be able to recalculate the size of the panorama:

//Display dialog with streetview
function showStreetView(position){
    var panoramaOptions = {position: position, pov: {heading: 34,pitch: 10}};
    var panorama = new  google.maps
        .StreetViewPanorama(document.getElementById("dialog-sw-canvas"), panoramaOptions);
    map.setStreetView(panorama);
    $( "#dialog-sw-canvas" ).dialog("open");
    google.maps.event.trigger(panorama,'resize');
}