Карты Google StreetView отображаются только в первый раз

Question

У меня есть страница карты Google, заполненная маркерами из базы данных. В маркере InfoWindow - это интерактивная ссылка, которая открывает диалоговое окно jquery с StreetView этого местоположения. Проблема заключается в том, что StreetView показывает только в первый раз, когда я нажимаю на ссылку InfoWindow. Если я закрою диалог и попробую его снова открыть (нажав на другие инфо-окна или даже тот же самый), я получаю свой диалог с элементами управления StreetView, также отображается новый адрес (с «Адрес приблизительный»), но остальные диалога является однородным светло-серым цветом.

Я пробовал некоторые warkarounds, отправленные в stackoverflow (например, this one), но серый диалог сохраняется в моем случае.

Edit: JSFiddle Example

создание Маркер с OnClick слушателю:

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 функции:

//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"); 
} 

Диалог определения:

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

Все работает как шарм, но только один раз.

Answer 1

Trigger изменение размера-событие панорамы после открытия диалогового окна, то API будет иметь возможность пересчитать размер панорамы:

//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'); 
}