-1

Google Maps doesn't show in a nav-tab. It doesn't show the place, but when I click on the map; it's correct in google.

the problem

HTML: 

<div class="tab-content">
    <div role="tabpanel" class="tab-pane fade" id="locatie"><?php if ($object->hasLocation): ?>
    <div>
        <h2>Kaart</h2>
        <div id="google-map"></div>
        <h2>Street View</h2>
        <div id="google-streetview"></div>
    </div>
    <?php endif; ?></div>
</div>

JS

(function($, exports) {
'use strict';

var GoogleMap = exports.GoogleMap = function(options) {
    this.map = null;
    this.markers = [];
    this.bounds = null;
    this.info = null;
    this.options = $.extend({
        container: '#google-map',
        mapContainer: null,
        map: {}
    }, options || {});
    this.$container = null;
};

CSS

.single-post-tst {
    .entry-content {
    width: 100%;
    margin: 2% 0 10%;
    display: inline-block;
    p {
    font-size: 16px;
    }
    }
    .container-content-single {
    ul, ol {
    margin: 0 0 1.5em 0;
    }
    .nav-tabs {
    border: 1px solid #ddd;
    li {
    margin-bottom: 0;
    border-right: 1px solid #ddd;
    }
    li:last-child {
    border-right: none;
    }
    li a {
    border-radius: 0;
    line-height: 2em;
    margin-right: 0;
    }
    li a:hover {
    background-color: #F29902;
    color: #fff;
    }
    li.active > a {
    padding-bottom: 12px;
    }
    a.nav-link.active {
    background-color: #F29902;
    color: #fff;
    }
    }
    .nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
    border: none;
    background-color: #F29902;
    color: #fff;
    }
    }
}

#google-map,
#google-streetview {width:100%; height:500px;}

I think the problem is with this line in JS:

container: '#google-map',

When I put the map out off the tab, it works correct. But I can't find any solution to show the map correct in the tab.

It shows now but not full width, I add this to CSS:

    .tab-content.tab-pane,
.tab-pane {
    /* display: none; */
    display: block;
    visibility: hidden;
    position: absolute;
}

.tab-content.active,
.tab-content .tab-pane.active,
.tab-pane.active {
    /* display: block; */
    visibility: visible;
    position: static;
}

It look like this now

When I say width: 100%; it doesn't make full width

Hnry Cn
  • 29
  • 1
  • 9
  • Could be the same issue as this, maybe? http://stackoverflow.com/questions/28404179/google-map-is-not-load-properly-in-tab-2-and-tab-3-how-to-create-refresh-tabs – QuestionMarks Dec 30 '15 at 16:15
  • This is likely caused by the div and its parents not having the desired width and height. Can you share the css you are using? [this question](http://stackoverflow.com/questions/16349476/map-isnt-showing-on-google-maps-javascript-api-v3-when-nested-in-a-div-tag) might be useful. – user5325596 Dec 30 '15 at 16:18
  • @user5325596 I add the css to the first post – Hnry Cn Dec 30 '15 at 16:54
  • @QuestionMarks I want to show it only in one tab. – Hnry Cn Dec 30 '15 at 16:56

2 Answers2

0

If the map is on a secondary tab it wont get the proper sizing, if you can place him on the active tab the problem will be solved.

If you want to maintain the map on an hidden tab, please check how to force the refresh / resize of the map when it becomes visible.

How do I resize a Google Map with JavaScript after it has loaded?

Sample code:

google.maps.event.trigger(map, "resize");

EDIT, another option:

You can also set a fixed size for the map, you can check the code sample here ;)

how to deal with google map inside of a hidden div (Updated picture)

Community
  • 1
  • 1
miguelmpn
  • 1,859
  • 1
  • 19
  • 25
  • Please check the other option I just added... Also, please do a test and set the tab that contains the map as active and tell us if the map shows correctly. – miguelmpn Dec 30 '15 at 17:19
  • When I set the tab to active it works, but not when it's the second tab @miguelmpn the problem is with the bootstrap tabs; i must add something like this $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { initialize(); }); see: http://www.bootply.com/102241 but I didn't know where to add in my js file – Hnry Cn Dec 30 '15 at 17:46
  • @Hzr Can Notice that on that page the map is only initialized after the tab is shown... `$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) { initialize(); });` – miguelmpn Dec 30 '15 at 17:49
  • that's what I want. But I can't find the difference with my code. – Hnry Cn Dec 30 '15 at 17:51
  • Try to add it inside the `jQuery(document).ready(function(){});` – miguelmpn Dec 30 '15 at 17:52
  • Can you create a jsFiddle – miguelmpn Dec 30 '15 at 18:04
0

I found a solution:

    .tab-content > .tab-pane {
    display: block;
    height:0;
    overflow:hidden;
}

.tab-content > .active {
    display: block;
    height:auto;
}
Hnry Cn
  • 29
  • 1
  • 9