Вложение изображения улиц в infowindow - Googlemaps v3

Question

Я использую googlemaps v3/ASP.net MVC/Knockout для экрана выбора местоположения. Я не могу получить изображение уличного обзора в инфоиндусте. Я пробовал несколько разных примеров. Я вижу, что изображение сбрасывается (просматривается в ресурсах браузера), но оно не отображается.

Кто-нибудь видит что-то, что мне не хватает? Кажется, что он должен работать. Я получаю предупреждение о «Ресурсе, который интерпретируется как изображение, но передается с помощью приложения MIME-типа/октет-потока», но, как я уже сказал, я вижу изображение, сделанное в браузере.

// Function for creating a marker and adding to myMarkers array 
    function addMarker(location, id) { 
    var selector = "#hiddenBranch" + id; 
    var html = $(selector)[0].innerHTML; 

    var panSelector = "PanId" + id; 

    var marker = new google.maps.Marker({ 
     position: location, 
     distance: google.maps.geometry.spherical.computeDistanceBetween(location, centerCoords), 
    }); 

    marker.setValues({id: id}) 

    google.maps.event.addListener(marker, "click", function() { 
     if (infowindow) infowindow.close(); 
     infowindow = new google.maps.InfoWindow({ 
     content: '' 
     }); 
     infowindow.setContent(html); 
     infowindow.open(map, marker); 

     var panoramaOptions = { 
     position: location, 
     pov: { 
      heading: 34, 
      pitch: 10, 
      zoom: 1 
     } 
     }; 

     var pano = null; 
     google.maps.event.addListener(infowindow,'domready', function() { 
     pano = new google.maps.StreetViewPanorama(document.getElementById(panSelector), panoramaOptions); 
     pano.bindTo("position", marker); 
     pano.setVisible(true); 
     }); 

    }); 

    myMarkers.push(marker); 
    } 

Часть html. Повторяется с нокаутом.

 @*The content of this div will be displayed in infowindow*@ 
    <div style="display:none"> 
     <div data-bind="attr: {'id': HiddenDivId}"> 
     <div style="width:100px; height:100px" data-bind="attr: {'id': HiddenPanDivId}"> 

     </div> 
     <input data-bind="value: Id" class="hiddenBranchId" type="hidden" value=""> 
     <input data-bind="value: DirectionLink" class="hiddenDirectionLink" type="hidden" value=""> 
     <ul> 
      <li><h2></h2></li> 
      <li data-bind="text: BranchName"></li> 
      <li data-bind="text: StreetAddress"></li> 
      <li><span data-bind="text: City"></span>, <span data-bind="text: Zip"></span> <span data-bind="text: State"></span></li> 
      <li><a href='#' class="branchSelectLink" onclick=selectBranch(this)>Select</a> | <a href="#" onclick=openDirectionWindow(this)>Directions here</a></li> 
     </ul> 
     </div> 
    </div> 

Answer 1

Я вижу 2 проблемы.

1. вы открываете InfoWindow, прежде чем добавить domready-событие
2. (более проблематично) установить содержание InfoWindow в innerHTML элемента, который уже существует внутри DOM, то результат будет что идентификаторы элементов больше не уникальны. Думаю, панорама будет применена к скрытому элементу, который уже существует внутри DOM, а не к «клону», который был применен к содержимому infoWindow.

Возможное решение 2.

1. Не использовать идентификаторы, имена классов или другие атрибуты достаточны для выбора элементов и не должны быть уникальными
2. создать реальный клон вместо использования innerHTML

     var html = $(selector).clone(true);

3. использование контекстно-аргумент для доступа к узлу внутри клона (а не внутри исходного элемента)

     pano = new google.maps.StreetViewPanorama($(panSelector,html)[0], 
                   panoramaOptions);