streetview into infowindow

Question

I m trying to show a streetview view into an infowindow, but I m not getting it, this is my code: Does anyone know how it could be done?

Thank you very much in advanced

function createMarker(myLatlng) {


var panoramaOptions = {
      position: myLatlng,
      pov: {
        heading: 34,
        pitch: 10,
        zoom: 1
      }
    };
var panorama = new  google.maps.StreetViewPanorama(document.getElementById('pano'),panoramaOptions);
    map.setStreetView(panorama);


var contentString = '<div id="pano" style="width:200px;height:200px;"></div>';
var image = '/artworks/icons/myMarker.png';
var marker = new google.maps.Marker({
  position: myLatlng,
  map: map,
  title: "myTitle",
  icon: image
});

    google.maps.event.addListener(marker, 'click', function() {
    infowindow.setContent(contentString); 
    infowindow.open(map,marker);


    map.setCenter(myLatlng); 
    }); 

return marker;  
}

Answer 1

I use:

var contentString = '<div id="content" style="width:250px;height:300px;"></div>';

    var infoWindow = new google.maps.InfoWindow({
        content: contentString
    });

google.maps.event.addListener(marker, "click", function () {

                infoWindow.open(mapStyled, marker);

                var pano = null;
                google.maps.event.addListener(infoWindow, 'domready', function () {
                    if (pano != null) {
                        pano.unbind("position");
                        pano.setVisible(false);
                    }
                    pano = new google.maps.StreetViewPanorama(document.getElementById("content"), {
                        navigationControl: true,
                        navigationControlOptions: { style: google.maps.NavigationControlStyle.ANDROID },
                        enableCloseButton: false,
                        addressControl: false,
                        linksControl: false
                    });
                    pano.bindTo("position", marker);
                    pano.setVisible(true);
                });

                google.maps.event.addListener(infoWindow, 'closeclick', function () {
                    pano.unbind("position");
                    pano.setVisible(false);
                    pano = null;
                });

Though I can't off-hand see why your code would not be working. In my case this is within a for loop parsing a KML file (thus creating a new popup and marker for each point).

Hope this helps.

[edit] On reflection it seems that the issue is probably that you're binding 'pano' to the div rather than it's contents. Also remember to unbind and rebind to different markers.