Embedding multiple streetviews but only one visible at a time

Question

I'm trying to embed multiple streetview panoramas (technically photospheres) that take up the full page - only one will be visible at a time.

I thought i would create separate panoramas and attach them to different divs, hiding all but the active div and then using some thumbnail links to hide and show the relevant div using jQuery.

This almost works, but the panoramas that are initially hidden do not show any imagery (the controls are there, but not the images themselves).

Is there something I need to set in the API? Or maybe there is a better way to do this?

The code i have now is:

function carparkPano() {
  var carparkID = "GPHkasenHbQAAAAGOrVDmQ";
  var carpark = {
    pano: carparkID,
    pov: {
      heading: 290,
      pitch:15
    },
    zoom: 0,
    addressControl: false
  };
  var myPhotoSphere = new google.maps.StreetViewPanorama(
      document.getElementById('pano1'),
      carpark);
  myPano.setVisible(true);
}

function rooftopPano() {
  var rooftopID = "VaIS8soJyPAAAAAGOsbvQA";
  var rooftop = {
    pano: rooftopID,
    pov: {
      heading: 0,
      pitch:10
    },
    zoom: 1,
    addressControl: false
  };
  var myPhotoSphere = new google.maps.StreetViewPanorama(
      document.getElementById('pano2'),
      rooftop);
  myPano.setVisible(true);
}

google.maps.event.addDomListener(window, 'load', carparkPano);
google.maps.event.addDomListener(window, 'load', rooftopPano);

Any ideas?

thanks

Answer 1

I think you might have to initialize it after showing the div, so it would end up looking something like this:

$(document).on('click', '#idOfElementTriggeringMap', function(){
    $('#pano2').show();
    ininitalizeMap('pano2');
  }
});

function initializeMap(map){
  // do map initialization here...
}

Update

I have since spotted this other post that suggests calling the resize event of the map after showing the div, which I presume would have the same effect:

Google map display from a hidden area