我为这个问题做了一个研究,我得到了普遍的答案,它是 google.maps.event.trigger(map,resize); 问题是我将它放在哪里,请帮助我。
感谢
解决方案google map有display:none父母的问题。
首次显示模态后初始化您的地图。 为显示模式的按钮或链接添加一个类。
$('。modal-opener-btn') .one('click',function(){ //把你的代码放在这里});
注意:使用one而不要使用on注意:如果此解决方案不起作用,也可以使用模式化的显示侦听器。
(pre> $('#myModal7')。on('shown',function(){ // putt your code here });
只要将底部的脚本标记和内容更改为:
< script type =text / javascript> 函数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){ google.maps.Marker({ position:results [0] .geometry.location, map:map }); google.maps.event.trigger(map,'resize'); map.setCenter(results [0] .geometry.location); } }); ('shown.bs.modal',function(){ init(); }); $ b $('#myModal7')。 < / script>
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="maps.googleapis/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.
Thanks
解决方案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
$('#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>
更多推荐
谷歌地图不显示引导模式
发布评论