Reveal Modal中的Google Map API未完全显示

我在div中有一个谷歌地图有问题,按钮点击后会弹出屏幕。 谷歌地图只是部分显示。 我知道我需要创建一个resize事件,但不知道如何或放在哪里。 任何帮助将非常感激! 请记住,我对JS知之甚少!

链接到测试网站:点击谷歌地图按钮,看看手上的问题:

http://simplicitdesignanddevelopment.com/Fannie%20E%20Zurb/foundation/contact_us.html#

我的Google API脚本:

 function initialize() { var mapOptions = { center: new google.maps.LatLng(39.739318, -89.266507), zoom: 5, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); }  

包含地图的div:

 

How to get here

×

单击按钮时调用地图的脚本:

  $(document).ready(function() { $('#myModal1').click(function() { $('#myModal').reveal(); }); });  

以下两个解决方案适合我

 function initialize() { var mapOptions = { center: new google.maps.LatLng(39.739318, -89.266507), zoom: 5, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); return map; } 
×
$(document).ready(function() { var myMap; $('#myModal').bind('open', function() { if(!myMap) { var myMap = initialize(); setTimeout(function() { google.maps.event.trigger(myMap, 'resize'); }, 300); } }); }

要么

 $(document).ready(function() { var myMap; $('#myModal').bind('opened', function() { if(!myMap) { var myMap = initialize(); google.maps.event.addDomListener(window, 'load', initialize); } }); }); 

首先,基于链接的源,在按钮单击时调用映射的脚本除了抛出错误之外什么都不做,因为在加载jQuery之前在页面中有它。 您可以在错误控制台中看到它。 您需要在其余脚本之后将其移动到页面底部。

您的显示“正在工作”,因为您正在使用菜单项上的data-reveal-id属性,并且显示脚本会自动连接它。

你正在创建地图onload这是不好的做法。 除非需要,否则不要创建它。

所以为了解决你的问题,这就是我所做的。 从菜单项中删除data-reveal-id并将其替换为ID,或者您可以使用其他选择器来访问它。 我将其更改为id="myModal1"因为这是您在事件代码中已经拥有的内容。

移动脚本,点击按钮点击底部调用地图,并将其更改为如下所示:

 $(document).ready(function() { var map; $('#myModal1').click(function() { if(!map){ var mapOptions = { center: new google.maps.LatLng(39.739318, -89.266507), zoom: 5, mapTypeId: google.maps.MapTypeId.ROADMAP }; map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); } $('#myModal').reveal(); }); 

});

这将仅在用户单击链接以显示地图时创建地图,并且仅创建一次。 那应该为你解决。 如果必须,您可以将打开的回调传递给reveal()调用并触发resize,但在我的有限测试中没有必要。

您还可以摆脱整个初始化函数。

现在去拿一个创可贴,在头上放些冰块。

去除width: 600px;

并在打开模态后触发map上的resize应该可以解决问题:

 $(".reveal-modal").on("reveal:opened", function(e) { google.maps.event.trigger(map, 'resize') }); 

试试这个

  
 $("#myModal").on('shown.bs.modal', function(){ google.maps.event.trigger(map, 'resize') });