Google Maps cannot Load Properly due to CSS Tabs

Question

http://www.bchomescondos.ca/properties/?city=Richmond&id=261681248 http://www.bchomescondos.ca/properties/?city=Richmond&id=261704393

Above are the sample links where the issue is arising.

The actual issue is the Google Map street view is not appearing when the street view tab is clicked. At first I thought it was an issue with the map script but later I found out (from the help of another thread in stackoverflow) that the problem is with the CSS tabs and how they are loaded.

Somehow when the roadmap tab is active the streetview is not appearing and when the streetview tab is active the roadmap is appearing distorted.

Someone told me that I have to load all the tabs during page load simultaneously and then hide the tabs which I don't want to appear initially. I guess this needs a knowledge of JS or jQuery, which I don't have.

So, I would be obliged if anyone can help me in this.

I have used simple Gumby framework to create the tabs. Code and links follows.

<div class="row">
    <div class="one columns"></div>

    <section class="ten columns tabs" style="margin: 20px 0;">         
        <ul class="tab-nav">
            <li class="active"><a href="#">Google Map</a></li>
            <li> <a href="#">Street View</a></li>
            <li><a href="#">Walk Score</a></li>
        </ul>
        <div class="tab-content active">
            <div id="map-canvas" style="height: 400px; border: 0.5px solid #000;">
            </div>
        </div>
       <div class="tab-content">
            <div id="pano" style="height: 400px; border: 0.5px solid #000;"></div>
        </div>
        <div class="tab-content">
            <div id="ws-walkscore-tile" style="height: 400px; border: 0.5px solid #000;"></div>
        </div>
        <script type='text/javascript' src='http://www.walkscore.com/tile/show-walkscore-tile.php'></script>            
    </section>

    <div class="one columns"></div>

Gumby Tabs Documentation

**I haven't added any other inline CSS or JS for this portion. If you need any other information, please let me know.

Answer 1

The map doesn't render as its size is unknown since it's hidden. If you can trigger some code when the map is shown, the following code will fix your issue:

google.maps.event.trigger(document.getElementById('pano'), 'resize');

As per: https://developers.google.com/maps/documentation/javascript/reference

Answer 2

Thanks everybody for help. Finally I got it figured. Btw the resize trigger event din't work in my case.

The main problem was when the streetview map object was created during document load, it was unaware about the hidden div. That is the reason it wasn't working.

The code will follow but first let me explain. I simply added a function on the onclick event of the anchor element that is making the hidden tab visible. Then inside that function I created the map object and it worked.

function test() {
    var fenway = new google.maps.LatLng(49.040302200000000, -122.281688200000000)    
    var panoramaOptions = {
        position: fenway,
        pov: {
            heading: 34,
            pitch: 10
        }
    };
    var panorama = new google.maps.StreetViewPanorama(document.getElementById('pano'), panoramaOptions);
    map.setStreetView(panorama);
}

Now the HTML

<section class="ten columns tabs" style="margin: 20px 0;">      
  <ul class="tab-nav">
    <li class="active"><a href="#">Google Map</a></li>
    <li><a href="#" onclick="test()">Street View</a></li>
  </ul>
  <div class="tab-content active">
    <div id="map-canvas" style="height: 400px; border: 0.5px solid #000;">
    </div> 
  </div>
  <div class="tab-content">
    <div id="pano" style="height: 400px; border: 0.5px solid #000;"></div>
    </div>
</section>

I hope everybody find this useful.