StreetView and InfoWindow

[CSharp]

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?

[Susannah (Google Employee)]

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

[Marx Tseng]

Try this sample.
http://marx-tseng.appspot.com/maps/Map_Street_View.html

[CSharp]

Thanks Susannah. I'll give that a try. This at least explain why I'm
having so much problems with getting the containers inside the
InfoWindow. Hopefully, this will solve my issues with the
StreetViewPanorama as well.

[CSharp]

Hi Susannah,

I tried both of your methods and I still get the javascript error:

'je' is null or not an object
main.js line29

'je' is null or not an object
main.js
Code: 0
URI: http://maps.gstatic.com/intl/en_us/mapfiles/api-3/1/7b/main.js
Line 29, char: 1018

I see this on IE. It probably throws the same errors from Chrome or
FireFox as the browser link says Parse error or Object null reference
or something to that effect.

Any clues?

[Rossko]

> Any clues?

Not many, that I can see.

[William]

On Jul 22, 6:37 am, CSharp <aliquis.igno...@gmail.com> wrote:
>
> Any clues?

I tried the first method and it seems ok:

http://www.william-map.com/20100722/1/method1.htm

maybe you are still using this jQuery, which returns a jQuery object,
not a div?

var streetView = new google.maps.StreetViewPanorama($
(streetViewContainerObj).find("#streetViewContainer"));

...

[CSharp]

OK, thanks to all who have tried to help me on this one. I finally
had the time to just sit down and just examine my code and Marx
Tseng's code on his map. By using Marx's map javascript code and
rebuilding it to what I have (since his is built using my code from
previous examples), I was able to set up the StreetView one step at a
time putting code here and there to see if I can reproduce the same
javascript errors that I'm getting on my page. Finally, I was able to
reproduce the error and it all comes down to this StreetView method:

setVisible(false);

For some reason, setting the streetview panorama to not be visible
make a lot of functionality for the StreetView got whacky. Also, I
find that if you hide a Div container, and not setVisible(true) for
the StreetViewPanorama, the image behind the StreetView does not show
up. So, you're left with a gray background with the zoom, pan, and
other functionality working. It's not until you zoom out/in that you
get the image of the street show up. Anyway, I'll upload the code on
Monday, July 26th to show the working code with the comments to
duplicate the errors.

What I like explained is why setting the setVisible(false) gives such
a headache and why setVisible(true) must be used every time,
especially the way I coded my street view panorama functionality.
(Note that I needed to code the streetview the way I did is because of
AJAX calls for markers and infowindows, which are asynchonous calls to
the web server.)

[CSharp]

Here's the link for the StreetView that I promised to include:

http://www.mentoreng.com/testing/public/streets.html

[Neil Drinkall]

I have the same problem - it started with the 22nd July update. I
haven't found a way around it yet. I start off with my street view div
hidden and then show/hide it as I need to - the first time I try and
show it I get the "je is null or not an object" error. I have reported
it to Google and they have confirmed it as an issue here:

http://code.google.com/p/gmaps-api-issues/issues/detail?id=2588&q=apitype%3AJavascript3&sort=-id&colspec=ID%20Type%20Status%20Introduced%20Fixed%20Summary%20Internal%20Stars

If you have a way around the problem I'd be interested to see it.

[William]

On Jul 27, 1:24 am, CSharp <aliquis.igno...@gmail.com> wrote:
> Here's the link for the StreetView that I promised to include:
>
> http://www.mentoreng.com/testing/public/streets.html

on IE8 I found that the "je is null" error doesn't happen if you
construct the panorama with the option of visible:false, rather than
setting it invisible afterwards:

streetView = new google.maps.StreetViewPanorama(
document.getElementById("stickyStreetViewContainer"),
{visible:false}
);

// Put this statement in and you'll get the
// javascript error from Google Maps:
// streetView.setVisible(false);

...

[William]

On Jul 20, 3:57 pm, Marx Tseng <marx.z...@gmail.com> wrote:
> Try this sample.http://marx-tseng.appspot.com/maps/Map_Street_View.html
>
your sample puts random markers in an area where most of the locations
have streetview available, but in other locations there is no
streetview and a blank viewer is displayed. This makes it difficult
to see whether the code for displaying streetview in an infowindow is
working properly.

I have done a test to see if streetview is available within 50 metres
of each location. If streetview is available a blue marker is shown,
otherwise a red marker is shown. You can drag the pegman onto the map
to confirm the locations where streetview isn't available:

http://www.william-map.com/20100727/1/map.htm

...