由于 Bootstrap 和 Google 映射之间存在冲突，因此 div 呈灰色

Question

我正在尝试在我的网站上实施 Google 地图 API，不幸的是收效甚微。

我正在使用 bootstrap，大部分 CSS 设置未受影响。

经过一整天的研究和探索，我发现，如果我从我的代码中删除 bootstrap 的 3 CDN 代码行：

        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
        <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Google 地图加载完美，但是，当引导代码为运行时，我看到的只是一个灰色的 div，里面有 Google 签名。

还有。我发现，如果我调整浏览器的大小，那么地图将如预期的那样完美加载。

拉斯，地图在一个选项卡内，五分之一，我没有更改选项卡的初始 CSS 设置。

请帮忙，

代码如下：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="UTF-8">
                    <meta name="viewport" content="initial-scale=1.0">
            <title>sys</title>
            <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
            <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
            <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
            <link href='http://fonts.googleapis.com/earlyaccess/notosans.css' rel='stylesheet' type='text/css'>
            <link href="includes/styles.css" rel="stylesheet" type="text/css">
            <link rel="icon" type="image/png" href="includes/icons/favicon.png" />
            <script src="http://canvasjs.com/assets/script/canvasjs.min.js"></script>
            <script src="js/ajax.js"></script>
                    <script src="js/hideCaseDetailsifVolunteer.js"></script>




      <script>
                var map;
                function initMap() {
                    map = new google.maps.Map(document.getElementById('googleMap'), {
                        center: {lat: -34.397, lng: 150.644},
                        zoom: 8
                    });
                }


                function loadScript()
                {
                    var script = document.createElement("script");
                    script.type = "text/javascript";
                    script.src = "http://maps.googleapis.com/maps/api/js?key=AIzaSyAfUA7aWeXe4fxoBE9PzjWRJ3MRlcSaYh0&callback=initMap";
                    document.body.appendChild(script);
                }

                window.onload = loadScript;
    </script>

....
.....
....
....



    <div id="menu4" class="tab-pane fade">
    <div id="map-container">
    <div id="googleMap" style="width:100%;height:400px;"></div>
    </div>

    </div>

CSS:

@media (max-width: 970px) {
    .navbar-header {
        float: none;
    }
    .navbar-left, .navbar-right {
        float: none !important;
    }
    .navbar-toggle {
        display: block;
    }
    .navbar-collapse {
        border-top: 1px solid transparent;
        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
    }
    .navbar-fixed-top {
        top: 0;
        border-width: 0 0 1px;
    }
    .navbar-collapse.collapse {
        display: none !important;
    }
    .navbar-nav {
        float: none !important;
        margin-top: 7.5px;
    }
    .navbar-nav > li {
        float: none;
    }
    .navbar-nav > li > a {
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .collapse.in {
        display: block !important;
    }
}

nav, header, section, footer, article {
    display: block;
}

.container {
}

.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
    background-color: #4CAF50;
}
.navbar-custom .navbar-toggle, .navbar-custom .nav .open > a, .navbar-custom .nav .open > a:hover, .navbar-custom .nav .open > a:focus {
    background-color: #FFC107;
}
.navbar-custom {
    background-color: #263238;
    color: #FFFFFF;
    border-radius: 0;
}

.navbar-custom .navbar-nav > li > a {
    color: #fff;
}
.navbar-custom .navbar-nav > .active > a, .navbar-nav > .active > a:hover, .navbar-nav > .active > a:focus {
    color: #ffffff;
    background-color: transparent;
}

.navbar-custom .navbar-nav > li > a:hover, .nav > li > a:focus {
    text-decoration: none;
    background-color: #FFC107;
}

.navbar-custom .navbar-brand {
    color: #F44336;
}

.navbar-custom .navbar-toggle {
    background-color: #607D8B;
}
.navbar-custom .icon-bar {
    background-color: #FFFFFF;
}
.dropdown-menu > li > a {
    color: #515151;
}
.color_position {
    color: #0a8b9b;
    font-size: 80%;
}
.logo {
    position: relative;
    bottom: 10px;
    height: 38px;
    width: 163px;
}
.navbar-collapse {
    border-top: 0px !important;
    box-shadow: none;
}
.right-to-left {
    margin-top: 30px;
}

.right-to-left li {
    float: right;
}
.tab-content {
    direction: rtl;
}
/* Code below Turns Off Number Input Spinners*/
input[type=number]::-webkit-inner-spin-button, input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.panel-group {
    margin: 0 auto;
    width: 80% /* value of your choice which suits your alignment */
}
#tip {
    background-image: url(images/tip1.png);
    height: 64px;
    width: 260px;
}
#birthday {
    background-image: url(images/birthdays1.png);
    height: 64px;
    width: 260px;
}
#whatsnew {
    background-image: url(images/whatsnew.png);
    height: 64px;
    width: 260px;
}
#importantphones {
    background-image: url(images/importantphones.png);
    height: 64px;
    width: 260px;
}
.turn {
    float: right;
}
.lil {
    float: right;
}
#chartContainer {
width:500px;
direction: ltr;
}
.buttonn{
margin:10px;
}
/*יצירת פנייה*/
textarea{ 
  resize:none;
}
.heading
{
   text-align:center;
   margin:5px;
   font-size:15px;
   color:blue;
}

#select_box
{
   width:350px;
   background-color:#819FF7;
   padding:10px;
   height:375px;
   border-radius:5px;
   box-shadow:0px 0px 10px 0px grey;
}
select
{
   width:329px;
   height:35px;
   border:1px solid #BDBDBD;
   margin-top:20px;
   padding:2px;
   font-size:15px;
   color:grey;
   border-radius:5px;
}


.clear {
    clear: both;
}

Answer 1

这并不是真正的冲突...您只需要在显示相应的 bootstrap 选项卡后调用地图调整大小即可。

例如：

$('a[data-toggle="tab"]').on('shown.bs.tab', function () {

    // Trigger a map resize 
    google.maps.event.trigger(map, 'resize');
});

当然，如果您只想在显示特定选项卡时触发调整大小，您可能需要调整选择器 a[data-toggle="tab"]...

Bootstrap tab events documentation

由于 Bootstrap 和 Google 映射之间存在冲突，因此 div 呈灰色

Greyed div due to a conflict between Bootsrap and Google Maps

javascript

maps

jquery

google-maps-api-3

twitter-bootstrap