twitter-bootstrap 谷歌地图未显示在引导模式上
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32037272/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google map not showing on bootstrap modal
提问by remo lalata
Im am planning to show a google map on a modal, but the map is not showing from the modal
我打算在模态上显示谷歌地图，但地图没有从模态中显示
This is my code:
这是我的代码：
<div style="margin-top:-7px;">
<button class="btn btn-default pull-right btn-mini " style="margin-right:5px;" data-toggle="modal" data-target="#myModal7"><i class="fa fa-globe"></i> Show Map</button>
</div>
<div class="modal inmodal fade" id="myModal7" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-md">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title">Address</h4>
</div>
<div class="modal-body">
<div class="panel mb25 mt5" style="width:500px; margin:0 auto; padding:10px;">
<div id="map" style="width: 500px; height: 500px;"></div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-white" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<script type="text/javascript">
var address = 'Japan';
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 16
});
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
'address': address
},
function(results, status) {
if(status == google.maps.GeocoderStatus.OK) {
new google.maps.Marker({
position: results[0].geometry.location,
map: map
});
google.maps.event.trigger(map, 'resize');
map.setCenter(results[0].geometry.location);
}
});
</script>
I did a research for this problem, ang i got the common answer, it is google.maps.event.trigger(map, "resize");the problem is where will i put it, please help me.
我对这个问题进行了研究，得到了共同的答案，google.maps.event.trigger(map, "resize");问题是我要把它放在哪里，请帮助我。
Thanks
谢谢
回答by Bojbaj
google map has problem with "display:none" parent.
谷歌地图有“显示：无”父级的问题。
initialize your map after showing modal for first time. add a class for button or link that show modal.
第一次显示模态后初始化您的地图。为显示模态的按钮或链接添加一个类。
$('.modal-opener-btn').one('click', function(){
//putt your code here
});
NOTICE : use "one" and dont use "on"
NOTICE : also can use modal "shown" listener, if this solution doesn't work
注意：使用“one”，不要使用“on”
注意：如果此解决方案不起作用，也可以使用模态“显示”侦听器
$('#myModal7').on('shown', function(){
//putt your code here
});
Just change bottom script tag and contents to :
只需将底部脚本标签和内容更改为：
<script type="text/javascript">
function init(){
var address = 'Japan';
var map = new google.maps.Map(document.getElementById('map'), {
zoom: 16
});
var geocoder = new google.maps.Geocoder();
geocoder.geocode({
'address': address
},
function(results, status) {
if(status == google.maps.GeocoderStatus.OK) {
new google.maps.Marker({
position: results[0].geometry.location,
map: map
});
google.maps.event.trigger(map, 'resize');
map.setCenter(results[0].geometry.location);
}
});
}
$('#myModal7').on('shown.bs.modal', function(){
init();
});
</script>
回答by S_C
regarding your research you can try to use that function
关于您的研究，您可以尝试使用该功能
inside this
这里面
$(document).ready(function(){
$('#your_modal_id').on('shown.bs.modal',function(){
google.maps.event.trigger(map, "resize");
});
});
回答by Patrick Sturge
Had the same problem and this was the solution that made my day: Make sure that you have jQuery on the initial page that called your modal page:
遇到了同样的问题，这是让我开心的解决方案：确保在调用模态页面的初始页面上有 jQuery：
