谷歌地图js api v3：街景全景加载完成？

Question

I'm having some trouble with my streetview. I want to show the streetview only after it finishes loading, so that the gray colour is not displayed. I searched the api, but I don't think there's any events that I can make use of: Documentation

Is there any way (including non official ways) to show the streetview AFTER it's fully loaded? Thanks!

Answer 1

I did some test (edited example of vinod_vh, see http://jsfiddle.net/nDwSC/2/ ) and found out, that the links_changed event is the last one launched:

1. červen 2013 17:48:28.775 ===== CLICK OCCURRED ===== /nDwSC/2/show/ (line 210)
2. červen 2013 17:48:28.780 resize /nDwSC/2/show/ (line 170)
3. červen 2013 17:48:28.843 zoom_changed /nDwSC/2/show/ (line 173)
4. červen 2013 17:48:29.603 pano_changed /nDwSC/2/show/ (line 158)
5. červen 2013 17:48:29.622 position_changed /nDwSC/2/show/ (line 161)
6. červen 2013 17:48:29.634 links changed

So you might actually want to use this event, It will be launched also in different contexts, but you can handle this by having some flag variable, which will be set when you click the button, and tested in the handler. with possible timeout.

So, what you should do:

1. hide your streetview; but dont use display: none , use the trick with off-left hiding technique as in jQuery UI < 1.9 (for new versions there is it doesn't work unfortunately :

   .hide { position: absolute;important: left; -10000px !important; }

   keep the hidden frame of the same dimensions as the resultant one!

2. handle the links_changed event - remove the hide class, and do resize of the map.

If you see that links_changed event is fired too early, there's no other possibility to do this cleanly by handling events. You cannot even use the map idle event (and idle event for google.maps.StreetViewPanorama doesn't exist). So the last resort is probably to use some fixed timeout - that works perfectly!

Answer 2

hiding and making the div visible after map is loaded should do the trick...

like this

<div id="pano" style="position:absolute; left:410px; top: 8px; width: 400px; height: 300px;visibility:hidden;"></div>

<script> google.maps.event.addDomListener(window, 'load',initialize);
setTimeout('showPano()',1000);
function showPano(){
document.getElementById('pano').style.visibility='visible';}
</script>

hope it helped you

Answer 3

If you want to load panorama after loaded, for that you may use iframe and with that you can have wrapper with AJAX loader, that will not change until the map loaded, (ready state ==4),( or one more ajax loader wrapper with some global variable as flag to know the ready state.., Note: this is unstable idea, but works with some browsers)

That will be easy way, in API, if you want to do that,

refer event listeners,

else

options have one option in documentation,

ie

visible:: boolean:: If true, the Street View panorama is visible on load.

I hope this will make things easy on your side..

I hope I have answered in context to your actual requirements..