Bootstrap 3.0和Google maps JavaScript API V3样式 [英] Bootstrap 3.0 and Google maps javascript API V3 styling
问题描述
我正在尝试将google maps javascript API v3实施到Bootstrap 3.0网站，该网站利用bootstrap 3.0carousel基本主题。
问题在于< div id =map-canvas>< / div> 会如果我尝试将其包含在任何其他div或bootstrap 3样式中，例如在< div class =col-xs-6>< / div> / code>。但是，只要它不包含在另一个div中，它就会呈现。
我发现建议此修补程序的注意事项，它指示使用以下方法将google-map-canvas类添加到map-canvas div code：
.google-map-canvas，
.google-map-canvas * {.box-sizing（内容盒）; }
我已将此代码添加到bootstrap.min.css，然后将div更改为< div class =google-map-canvasid =map-canvas>< / div> ，但如果我将其包含在引导3样式所需的任何其他div。
我需要将这张地图放置在我的联系页面的右半部分，左侧的联系表单位于页面上。
以下是我的测试代码：
JAVASCRIPT（on ）：
{％if on_contactpage％}
html {height：100％}
body {height：100％;保证金：0; padding：0}
＃map-canvas {height：100％}
< / style>
< script type =text / javascript
src =https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&sensor=false>
< / script>
< script type =text / javascript>
函数initialize（）{
var mapOptions = {
center：new google.maps.LatLng（-34.397,150.644），
zoom：8，
mapTypeId： google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map（document.getElementById（map-canvas），
mapOptions）;
}
google.maps.event.addDomListener（window，'load'，initialize）;
< / script>
{％endif％}
HTML：
< div class =row>
< div class =col-xs-6>
< h2>联系表单转到这里< / h2>
< / div>
< div class =col-xs-6>
< div class =google-map-canvasid =map-canvas>
< / div>
< div class =col-xs-6>
< h2>香港< / h2>
<地址>
< strong>香港商业地址< / strong>< br>
100商业地址< br>
九龙< br>
香港< br>
香港< br>
邮编不适用< br>
< abbr title =电话> P：< / abbr> 01234 567 890
< / address>
< / div>
< div class =col-xs-6>
< h2>深圳，P.R.C.< / h2>
<地址>
< strong> SZ商务地址< / strong>< br>
100商业地址< br>
福田区< br>
< br>
深圳，广东< br>
518000< br>
< abbr title =电话> P：< / abbr> 01234 567 890
< / address>
< / div>
< / div>
< / div>
＃map-canvas {
width：100％;
height：500px;
..或设置所有地图画布 $ b
<$ c $> c> html，body，.row，.col-xs-6 {height：100％}
您可以在包含 map-canvas 的.row中指定一个id，然后将其用于CSS特定...
html，body，#myrowid，#myrowid .col-xs-6 {height：100％}
以下是Bootply的一个工作示例： http://bootply.com/77513
I'm trying to implement a google maps javascript API v3 into a Bootstrap 3.0 website that is leveraging the bootstrap 3.0 "carousel" base theme.
The problem is the <div id="map-canvas"></div> will not render on my page if I try to include it inside of any other div or bootstrap 3 styling, such as inside <div class="col-xs-6"></div>. However, it will render so long as it is not included inside another div.
I have found a note that recommends this fix which instructs to add a google-map-canvas class to the map-canvas div using the following code:
.google-map-canvas,
.google-map-canvas * { .box-sizing(content-box); }
I've added this code to bootstrap.min.css and then changed the div to <div class="google-map-canvas" id="map-canvas"></div> but the canvass will still not render if I include it inside of any other div required for bootstrap 3 styling.
I need this map to be positioned on the right half of my contact page, with the contact form on the left have of the page. Any suggestions on how to fix this is appreciated.
Below is my test code:
JAVASCRIPT (on "base.html"):
{% if on_contactpage %}
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding: 0 }
#map-canvas { height: 100% }
</style>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=MY_API_KEY&sensor=false">
</script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
{% endif %}
HTML:
<div class="row">
<div class="col-xs-6">
<h2> contact form goes here</h2>
</div>
<div class="col-xs-6">
<div class="google-map-canvas" id="map-canvas">
</div>
<div class="col-xs-6">
<h2>Hong Kong</h2>
<address>
<strong>HK Business Address</strong><br>
100 Business Address<br>
Kowloon<br>
Hong Kong<br>
Hong Kong<br>
Zip Code N/A<br>
<abbr title="Phone">P:</abbr> 01234 567 890
</address>
</div>
<div class="col-xs-6">
<h2>Shenzhen, P.R.C.</h2>
<address>
<strong>SZ Business Address</strong><br>
100 Business Address<br>
Futian District<br>
<br>
Shenzhen, Guangdong<br>
518000<br>
<abbr title="Phone">P:</abbr> 01234 567 890
</address>
</div>
</div>
</div>
Since the map-canvas is contained within several other containers (html,body,row,col-xs-6), you need the either set it's height in pixels..
#map-canvas {
width:100%;
height:500px;
}
.. or set all of the map-canvas containers to height:100%..
html, body, .row, .col-xs-6 { height: 100% }
You could specify an id in the .row that contains the map-canvas, and then use this for CSS specificity...
html, body, #myrowid, #myrowid .col-xs-6 { height: 100% }
Here's a working example on Bootply: http://bootply.com/77513
这篇关于Bootstrap 3.0和Google maps JavaScript API V3样式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
