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

score 0 · Accepted Answer · edited May 23 '17 at 12:03

0

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

edited May 23 '17 at 12:03

Community

1
1

answered Dec 30 '13 at 15:23

Martin Hansen Lennox

2,837
2
23
64

Thanks for that - it pointed me in the right direction. I ended up writing a initialize function for each panorama and then adding an onclick event to each thumbnail link to trigger them when needed. – chris_huh Dec 30 '13 at 17:12

Embedding multiple streetviews but only one visible at a time

1 Answers1