谷歌地图不显示引导模式

本文介绍了谷歌地图不显示引导模式的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

这是我的代码：

$ b我的计划是在模式上显示谷歌地图，但地图不显示模式。 $ b

< div style =margin-top：-7px;> < button class =btn btn-default pull-right btn-ministyle =margin-right：5px; data-toggle =modaldata-target =＃myModal7>< i class =fa fa-globe>< / i>显示地图< /按钮> < / div> < div class =modal inmodal fadeid =myModal7tabindex = - 1role =dialogaria-hidden =true> < div class =modal-dialog modal-md> < div class =modal-content> < div class =modal-header> < button type =buttonclass =closedata-dismiss =modal>< span aria-hidden =true>& times;< / span>< span类= SR-仅 >关闭< /跨度>< /按钮> < h4 class =modal-title>地址< / h4> < / div> < div class =modal-body> < div class =panel mb25 mt5style =width：500px; margin：0 auto; padding：10px;> < div id =mapstyle =width：500px; height：500px;>< / div> < / div> < / div> < div class =modal-footer> < button type =buttonclass =btn btn-whitedata-dismiss =modal>关闭< / 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 ='日本'; 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）; } }）; < / script>

我为这个问题做了一个研究，我得到了普遍的答案，它是 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">&times;</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>