Both the Map and the StreetViewPanorama require a DIV element that is
already in the DOM in order to render. When creating an InfoWindow,
the content is appended to the DOM asynchronously. Once the elements
have been added to the DOM, we trigger a 'domready' event. At that
point, you can access the DIV you're trying to create, or tell the
StreetViewPanorama to recalculate its size by triggering a 'resize'
event. There are a number of ways to accomplish this, but here are
two examples that accomplish what I think you're after:
var infowindow = new google.maps.InfoWindow({
content: '<div id="sv" style="width:300px;height:200px;"></div>',
position: map.getCenter()
});
infowindow.open(map);
google.maps.event.addListener(infowindow, 'domready', function() {
var panorama = new
google.maps.StreetViewPanorama(document.getElementById("sv"));
panorama.setPosition(infowindow.getPosition());
});
And an alternative:
var streetViewDiv = document.createElement('div');
streetViewDiv.style.width = '300px';
streetViewDiv.style.height = '200px';
var infowindow = new google.maps.InfoWindow({
content: streetViewDiv,
position: map.getCenter()
});
infowindow.open(map);
// The streetViewDiv is not in the DOM yet, so we trigger a resize
event once the InfoWindow is ready.
var panorama = new google.maps.StreetViewPanorama(streetViewDiv,
{position: infowindow.getPosition()});
google.maps.event.addListener(infowindow, 'domready', function() {
google.maps.event.trigger(panorama, 'resize');
});
The second method allows you to use the panorama object even before
the domready event has been triggered.
I hope these examples help.
Susannah
On Jul 20, 1:07 pm, CSharp <[email protected]> wrote:
> Man, this StreetView is hard to deal with in conjunction with the
> InfoWindow. The reason being is that the content settings in both are
> not consistent. With the InfoWindow, you can inject the content with
> jQuery, HTML, or almost any text string. With the StreetViewPanorama
> constructor, it can only inject a node via a valid
> document.getElementById.
>
> My problem is this:
>
> 1) I have a variable as follows:
>
> var someDivContainer = "<div id='outsideContainer'>" +
> "<div
> id='insideContainer1'>Please Wait...</div>" +
> "<div
> id='insideContainer2'>Blah, Blah, Blah,...</div>" +
> "<div
> id='streetViewContainer'></div>"+
> "</div>"
>
> 2) now I set the InfoWindow to contain the above:
>
> var infoWindow = new google.maps.InfoWindow({zIndex: 1});
> infoWindow.setContent(someDivContainer);
>
> 3) finally, I want to set the StreetViewPanorama to the
> "streetViewContainer" as defined in the dynamic HTML in
> someDivContainer
>
> var streetView = new google.maps.StreetViewPanorama(???);
>
> -----------------------
>
> I've tried using jQuery to get the inside containers like this:
>
> var streetViewContainerObj = infoWindow.getContent();
> var streetView = new google.maps.StreetViewPanorama($
> (streetViewContainerObj).find("#streetViewContainer")); //get
> javascript error coming from Google Map API
>
> I've tried writing out the DIV containers as static HTML on the page
> and then reference the streetViewContainer directly using
> document.getElementId like this:
>
> var streetView = new
> google.maps.StreetViewPanorama(document.getElementById("streetViewContainer"));
> //
> get Google Map API error, especially when containers are set to the
> style of "display:none".
>
> Can someone please tell me how I can obtain a proper node to shove
> into the StreetViewPanorama object so that it can display a StreetView
> properly?
--
You received this message because you are subscribed to the Google Groups
"Google Maps JavaScript API v3" group.
To post to this group, send email to [email protected].
To unsubscribe from this group, send email to
[email protected].
For more options, visit this group at
http://groups.google.com/group/google-maps-js-api-v3?hl=en.
