streetview into infowindow

google-maps-api-3, google-street-view, infowindow

Solution

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.

Problem

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; } ```

Original source