如何在Bootstrap网格覆盖中嵌入Google Maps API？
如何在Bootstrap网格覆盖中嵌入Google Maps API？
提问于 2017-12-14 00:15:40
我正在制作一个应该看起来像这样的网页：https://imgur.com/a/eW3gK
我正在尝试使用引导网格，但是地图没有调整大小，并且显示在列的正下方，它不起作用。
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="~/css/custom.css">
<script src="~/js/googleMap.js"></script>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div class="row">
<div class="col-md-6">Google Maps</div>
</div>
<div class="row">
<div class="col-md-6">Contact Information</div>
<div class="col-md-6">
<div id="map"></div>
</div>
</div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCQKR41AqiPXn-2WfLS-giuXPLWpnFxLjk&callback=initMap"></script>
</body>
</html>CSS
#map {
width: 100%;
height: 400px;
background-color: grey;
}JS
function initMap() {
var uluru = { lat: 51.957244, lng: 4.570751 };
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}根据样机，如何将Google Maps与Bootstrap网格一起使用？
回答 1
Stack Overflow用户
发布于 2017-12-18 12:02:52
检查此工作示例http://jsbin.com/capetay/edit?output
下面是更新后的html，Map和Contact Info容器应该在同一行中
<div class="row body">
<div class="col-sm-6">
<div id="map"></div>
</div>
<div class="col-sm-6 text-center">
<h4>Contact Information</h4>
<ul>
<li>ABC</li>
</ul>
</div>
</div>下面是代码片段：(尝试在全屏模式下运行)
function initMap() {
var uluru = { lat: 51.957244, lng: 4.570751 };
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 15,
center: uluru
});
var marker = new google.maps.Marker({
position: uluru,
map: map
});
}#map {
width: 100%;
height: 400px;
background-color: grey;
}
.row.body > div {
padding: 30px;
border: 1px solid
}
.with-border h3 {
border: 1px solid black;
max-width: 300px;
margin: auto auto 20px auto;
padding: 15px;
}
ul {
list-style: none;
padding: 0;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<title>Google Maps API in Bootstrap</title>
</head>
<body>
<h3>My Google Maps Demo</h3>
<div class="row">
<div class="col-md-12 text-center with-border">
<h3>Google Maps</h3>
</div>
</div>
<div class="row body">
<div class="col-sm-6">
<div id="map"></div>
</div>
<div class="col-sm-6 text-center">
<h4>Contact Information</h4>
<ul>
<li>ABC</li>
</ul>
</div>
</div>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCKQX3cyZ7pVKmBwE8wiowivW9qH62AVk8&callback=initMap"></script>
</body>
</html>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/47797659
复制相关文章
相似问题
腾讯云开发者
