[英]Google maps not showing in bootstrap page
I am embedding a google map in web page based on Bootstrap css. 我在基于Bootstrap CSS的网页中嵌入Google地图。 Here follows the code in which he id for the map-canvas is used. 下面是使用他的地图画布ID的代码。
<div class="container-fluid">
<div class="row" style="height:100%;">
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li class="active"><a href="#">Overview</a></li>
</ul>
</div>
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" style="height:100%; width:100%;">
test
<div style="height:100%; width:100%;">
<input id="pac-input" class="controls" type="text" placeholder="Search Box">
<div id="map-canvas" style="height:100%">s</div>
</div>
</div>
</div>
</div>
After the page is loaded a javacript function is invoked which get the id of the map-canvas and substitute it with the map retrieved from Google. 页面加载后,将调用javacript函数,该函数获取地图画布的ID,并将其替换为从Google检索的地图。 The problem is that the map is not showing and I guess it depends on some issue related to the width or height of the different containers. 问题在于地图未显示,我想这取决于与不同容器的宽度或高度有关的某些问题。 How should I fix it? 我应该如何解决?
here is a piece of the javascript 这是一段JavaScript
var map;
function initialize() {
var markers = [];
var mapOptions = {
center : new google.maps.LatLng(43.77, 11.24),
zoom : 4,
scrollwheel : false,
mapTypeId : google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
console.log("test");
console.log(map);
}
google.maps.event.addDomListener(window, 'load', initialize);
[upate] Changed like this: [upate]更改如下:
<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main" style="height:100%; width:100%;">
<div class="row" style="100px;">
<div style="height:100%; width:100%;">
<div id="map-canvas">s</div>
</div>
</div>
</div>
</div>
But it doesn't work 但这不起作用
the map-canvas or its parents must have a decent height. 地图画布或其父母必须具有适当的高度。 Try 尝试
<div id="map-canvas" style="height:100px;"></div>
note the px
instead of %
注意px
而不是%
Set the "min-height" by this div will reserve space, you need to adjust min-height as per your layout. 通过此div设置“最小高度”将保留空间,您需要根据布局调整最小高度。
#map {
min-height: 500px;
width: 100%;
height:100%
}
<div class="col-md-7">
<div id="map"></div>
</div>
I had this problem and also needed to define a minimum width for the map as well to make it work. 我遇到了这个问题,还需要为地图定义最小宽度以使其正常工作。 For Example: 例如:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.