Google Street View Black Screen

I am trying to put a Google Streetview Panorama instance inside of a tab inside of an offcanvas element using Bootstrap 5.

If the default tab is the tab that contains the Streetview everything works fine as is demonstrated here:
https://codepen.io/taylormhicks90-the-bold/pen/OJxxqQN

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:
https://codepen.io/taylormhicks90-the-bold/pen/Yzrrgro

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.

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.
https://codepen.io/taylormhicks90-the-bold/pen/RwLLdeP

html:

<div class='container'>
  <div class='row'>
    <div class='col-12'>
      <h1>My Page</h1>
      <button class='btn btn-primary' data-bs-toggle="offcanvas" data-bs-target="#offcanvas" >Click Here For Off Canvas</button>
    </div>
  </div>
</div>
<!--Off Canvas-->
<div class="offcanvas offcanvas-bottom" tabindex="-1" id="offcanvas" data-bs-backdrop="false">
    <div class="offcanvas-header">
        <ul class="nav nav-tabs" id="myTab" role="tablist">
            <li class="nav-item" role="presentation">
                <button class="nav-link active" id="pictures-tab" data-bs-toggle="tab" data-bs-target="#pictures"
                        type="button" role="tab" aria-controls="pictures" aria-selected="true">Pictures
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="streetview-tab" data-bs-toggle="tab" data-bs-target="#streetview"
                        type="button" role="tab" aria-controls="streetview" aria-selected="false">Street View
                </button>
            </li>
            <li class="nav-item" role="presentation">
                <button class="nav-link" id="map-tab" data-bs-toggle="tab" data-bs-target="#map" type="button"
                        role="tab" aria-controls="map" aria-selected="false">Map
                </button>
            </li>
        </ul>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <div class="tab-content h-100" id="myTabContent">
            <div class="tab-pane fade  show active" id="pictures" role="tabpanel" aria-labelledby="home-tab">
                <div class="row">
                    <div class='col-12'>
                      <p> My Pictures Go Here </p>
                    </div>
                </div>
            </div>
            <div class="tab-pane fade h-100" id="streetview" role="tabpanel" aria-labelledby="profile-tab">
                <div id="streetviewContainer" class="h-100 w-75 mx-auto"></div>
            </div>
            <div class="tab-pane fade h-100" id="map" role="tabpanel" aria-labelledby="contact-tab">
                <div id="mapContainer" class="h-100 w-75 mx-auto"></div>
            </div>
        </div>
    </div>
</div>
<script
        src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=initMaps&v=weekly"
        async
></script>

Javascript:

    let map,streetView;
    function initMaps() {
        const location = { lat: 42.345573, lng: -71.098326 };
        map = new google.maps.Map(document.getElementById("mapContainer"), {
            center: location,
            zoom: 19,
        });
        new google.maps.Marker({
            position: location,
            map,
        });
        streetView = new google.maps.StreetViewPanorama(
            document.getElementById("streetviewContainer"),
            {
                position: location,
                zoom: 0,
            }
        )
    }

Answer

Move StreetView call (new google.maps.StreetViewPanorama) into a function and then activate this function only when tab is active.

function loadStreetView() {
    streetView = new google.maps.StreetViewPanorama(
        document.getElementById("streetviewContainer"),
        {
            position: location,
            zoom: 0,
        }
    );
}


// listen to street view tab button only.
let streetviewTab = document.querySelector('#streetview-tab');
// listen to on shown.
streetviewTab.addEventListener('shown.bs.tab', function (event) {
  loadStreetView();
});

Only use this when default tab is not StreetView.

Reference: Bootstrap 5 tab events

Advertisement

Answer