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.

score 2 · Answer 1 · answered May 14 '15 at 05:34

2

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

answered May 14 '15 at 05:34

Steve

1,726
10
16

Thanks for your reply. Can you tell me where exactly to add that script? Do you want me to add the map api script? or you can view it on the page source code? – Arnab Ghosh May 14 '15 at 06:34
When you initialize the google maps object. call settimeout and trigger the resize event on map object. google.maps.event.trigger(pass the map object here, 'resize'); – Danish Jamil May 15 '15 at 07:35

score 1 · Answer 2 · edited Nov 21 '15 at 12:19

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.

Google Maps cannot Load Properly due to CSS Tabs

2 Answers2