title: Google Street View Black Screen
body: <p>I am trying to put a Google Streetview Panorama instance inside of a tab inside of an offcanvas element using Bootstrap 5.<br/><br/>
  If the default tab is the tab that contains the Streetview everything works fine as is demonstrated here: <br/><a href="https://codepen.io/taylormhicks90-the-bold/pen/OJxxqQN" rel="nofollow noreferrer">https://codepen.io/taylormhicks90-the-bold/pen/OJxxqQN</a><br/><br/>
  If I use a different tab as the default tab the Streetview is initially black and doesn't work unless you make it fullscreen first as is demonstrated here:<br/>
  <a href="https://codepen.io/taylormhicks90-the-bold/pen/Yzrrgro" rel="nofollow noreferrer">https://codepen.io/taylormhicks90-the-bold/pen/Yzrrgro</a><br/><br/>While I have a workaround of using the streetview tab as the default tab this in not the desired functionality. I have spent a few hours digging through googles docs and trying different workarounds. Just hopping someone can help explain why this is happening and what I can do to get it functioning properly or at least point me in the right direction.<br/><br/>
  I even tried this where I load the streetview while the streetview tab is the default tab and then change the tab to the pictures tab after the streetview has loaded, but it doesn't work.<br/><a href="https://codepen.io/taylormhicks90-the-bold/pen/RwLLdeP" rel="nofollow noreferrer">https://codepen.io/taylormhicks90-the-bold/pen/RwLLdeP</a></p>
  <p>html:</p>
  <pre><code>&lt;div class='container'&gt;
    &lt;div class='row'&gt;
      &lt;div class='col-12'&gt;
        &lt;h1&gt;My Page&lt;/h1&gt;
        &lt;button class='btn btn-primary' data-bs-toggle=&quot;offcanvas&quot; data-bs-target=&quot;#offcanvas&quot; &gt;Click Here For Off Canvas&lt;/button&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;!--Off Canvas--&gt;
  &lt;div class=&quot;offcanvas offcanvas-bottom&quot; tabindex=&quot;-1&quot; id=&quot;offcanvas&quot; data-bs-backdrop=&quot;false&quot;&gt;
      &lt;div class=&quot;offcanvas-header&quot;&gt;
          &lt;ul class=&quot;nav nav-tabs&quot; id=&quot;myTab&quot; role=&quot;tablist&quot;&gt;
              &lt;li class=&quot;nav-item&quot; role=&quot;presentation&quot;&gt;
                  &lt;button class=&quot;nav-link active&quot; id=&quot;pictures-tab&quot; data-bs-toggle=&quot;tab&quot; data-bs-target=&quot;#pictures&quot;
                          type=&quot;button&quot; role=&quot;tab&quot; aria-controls=&quot;pictures&quot; aria-selected=&quot;true&quot;&gt;Pictures
                  &lt;/button&gt;
              &lt;/li&gt;
              &lt;li class=&quot;nav-item&quot; role=&quot;presentation&quot;&gt;
                  &lt;button class=&quot;nav-link&quot; id=&quot;streetview-tab&quot; data-bs-toggle=&quot;tab&quot; data-bs-target=&quot;#streetview&quot;
                          type=&quot;button&quot; role=&quot;tab&quot; aria-controls=&quot;streetview&quot; aria-selected=&quot;false&quot;&gt;Street View
                  &lt;/button&gt;
              &lt;/li&gt;
              &lt;li class=&quot;nav-item&quot; role=&quot;presentation&quot;&gt;
                  &lt;button class=&quot;nav-link&quot; id=&quot;map-tab&quot; data-bs-toggle=&quot;tab&quot; data-bs-target=&quot;#map&quot; type=&quot;button&quot;
                          role=&quot;tab&quot; aria-controls=&quot;map&quot; aria-selected=&quot;false&quot;&gt;Map
                  &lt;/button&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
          &lt;button type=&quot;button&quot; class=&quot;btn-close text-reset&quot; data-bs-dismiss=&quot;offcanvas&quot; aria-label=&quot;Close&quot;&gt;&lt;/button&gt;
      &lt;/div&gt;
      &lt;div class=&quot;offcanvas-body&quot;&gt;
          &lt;div class=&quot;tab-content h-100&quot; id=&quot;myTabContent&quot;&gt;
              &lt;div class=&quot;tab-pane fade  show active&quot; id=&quot;pictures&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;home-tab&quot;&gt;
                  &lt;div class=&quot;row&quot;&gt;
                      &lt;div class='col-12'&gt;
                        &lt;p&gt; My Pictures Go Here &lt;/p&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class=&quot;tab-pane fade h-100&quot; id=&quot;streetview&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;profile-tab&quot;&gt;
                  &lt;div id=&quot;streetviewContainer&quot; class=&quot;h-100 w-75 mx-auto&quot;&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class=&quot;tab-pane fade h-100&quot; id=&quot;map&quot; role=&quot;tabpanel&quot; aria-labelledby=&quot;contact-tab&quot;&gt;
                  &lt;div id=&quot;mapContainer&quot; class=&quot;h-100 w-75 mx-auto&quot;&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;script
          src=&quot;https://maps.googleapis.com/maps/api/js?key=AIzaSyAoIwp-hHU0Hv-UIK3RycqxgxKb_QZNV2E&amp;callback=initMaps&amp;v=weekly&quot;
          async
  &gt;&lt;/script&gt;
  </code></pre>
  <p>Javascript:</p>
  <pre><code>    let map,streetView;
      function initMaps() {
          const location = { lat: 42.345573, lng: -71.098326 };
          map = new google.maps.Map(document.getElementById(&quot;mapContainer&quot;), {
              center: location,
              zoom: 19,
          });
          new google.maps.Marker({
              position: location,
              map,
          });
          streetView = new google.maps.StreetViewPanorama(
              document.getElementById(&quot;streetviewContainer&quot;),
              {
                  position: location,
                  zoom: 0,
              }
          )
      }
  </code></pre>