0
我试图在我的网站上实现Google Maps API，但不幸取得了一点成功。由于Bootsrap和谷歌地图之间的冲突而导致的Grey div
我使用的引导与大多数CSS设置保持不变。
经过研究和探索，我发现，如果我从我的代码删除引导的3 CDN代码行的一整天：在bootsrap代码运行时
<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。
另外。我发现，如果我调整浏览器的大小，那么地图加载完美 - 如预期的那样。
Las事情，地图位于标签内，五分之一，我没有更改标签的初始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;
}
谢谢，你解决了我的问题！ – Json
很酷。那么请接受答案！谢谢。 – MrUpsidown