我正在开发一个看起来像这样的网页:https://imgur.com/a/eW3gK
我正在尝试使用bootstrap网格,但地图只是没有调整大小并显示在列的正下方而且它不起作用。
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
});
}
如何根据模型使用带有Bootstrap网格的Google地图?
检查这个工作示例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>