Google Maps API v3 + Foundation 4显示模式无法正常显示 [英] Google Maps API v3 + Foundation 4 Reveal modal not displaying properly
问题描述
$ b如何使用google.maps.event.trigger $ b
以及Zurb的基金会问题清单 - > https://github.com/zurb /基金会/问题
我的问题似乎是相同的，我甚至查过他的源代码位于 http://simplicitdesignanddevelopment.com/Fannie%20E%20Zurb/foundation /contact_us.html ，它看起来像他得到了他的固定，但我不能得到我的固定。
不确定是否在基金会3和4这是导致我的问题（因为那些SO帖子差不多一岁了），但无论如何，它似乎不像调整大小的方法工作。
以下是我在db上的基本页面的链接 - > http： //db.tt/gdl3wVox
正如你所看到的小地图工作正常，但是当你点击View Bigger Map链接时，有两个问题。
- 主要问题 - 只有1/3的地图正在渲染。检查元素或在Chrome或IE中打开开发工具（F12）会导致地图重新渲染并适合div的整个宽度。 小问题 - 显示的地图不是以小标记为中心。
除了在此页面上添加这两个元素之外，foundation.css还没有被定制。所以你不必去挖掘他们的风格，这里是：
＃mini-map {
min-width：auto;
最大宽度：100％;
width：220px;
min-height：auto;
最大高度：100％;
height：154px; }
＃big-map {
min-width：auto;
最大宽度：100％;
width：600px;
min-height：auto;
最大高度：100％;
height：300px; }
我已经实现了 google.maps.event.trigger（map， 'resize'）; 按照其他帖子中的描述修改（用 bigmap 替换 map as我有两张地图）
< script>
var ourLocation = new google.maps.LatLng（46.213769，-60.266018）;
函数initialize（）{
var mapOptions = {
center：ourLocation，
zoom：14，
mapTypeId：google.maps.MapTypeId.ROADMAP
};
minimap = new google.maps.Map（document.getElementById（mini-map），mapOptions）;
bigmap = new google.maps.Map（document.getElementById（big-map），mapOptions）;
minimarker = new google.maps.Marker（{
map：minimap，
draggable：false，
动画：google.maps.Animation.DROP，
职位：ourLocation
}）;
bigmarker = new google.maps.Marker（{
map：bigmap，
draggable：false，
动画：google.maps.Animation.DROP，
位置： ourLocation
}）;
}
initialize（）;
< / script>
< script type =text / javascript>
$（document）.ready（function（）{
$（'＃myModal1'）。click（function（）{
$（'＃myModal'）。reveal（）;
google.maps.event.trigger（bigmap，'resize'）;
}）;
}）;
< / script>
但是这个脚本：
< script type =text / javascript>
$（document）.ready（function（）{
$（'＃myModal1'）。click（function（）{
$（'＃myModal'）。reveal（）; / *问题在这里* /
google.maps.event.trigger（bigmap，'resize'）;
}）;
}）;
< / script>
似乎对我造成了错误。当我在Chrome的开发工具中查看控制台时，我看到：
$ b
Uncaught TypeError：Object＃< Object>没有方法'显示'map.html：96
当钻取时显示另外两个错误：
（匿名函数）map.html：96
handler.proxy zepto.js：933
我不知道为什么它不能正常工作，因为我复制了上述主题中的修复程序。我对重新审视已解决的问题感到内疚，但我已经忍受了数小时的磨合，似乎无法像之前的帖子那样工作。
任何澄清都将不胜感激，敬请提前！谢谢！你应该使用
$（'＃myModal'）。foundation（'reveal'，'open'）;
显示模式。
另外， google.maps.event.trigger（bigmap，'resize'）; 应该绑定到打开的 #myModal google.maps .event.trigger（bigmap，'resize'）;
}）;
然后检查bigmap，它超出变量范围。
Before we begin I just want to make clear that I have already read the following SO articles top to bottom, tried to replicate the solution, and so far cannot.
Google Map API in Foundation reveal modal not displaying properly
Google Map API inside a Reveal Modal not showing fully
How to use google.maps.event.trigger(map, 'resize')
As well as Zurb's Foundation Issue List here - > https://github.com/zurb/foundation/issues
My issue seems to be identical, and I even checked his source code at http://simplicitdesignanddevelopment.com/Fannie%20E%20Zurb/foundation/contact_us.html and it looks like he got his fixed, but I cannot get mine fixed.
Not sure if it's a difference in Foundation 3 and 4 that's causing my problem (since those SO posts are almost a year old) but in any case it doesn't seem like the resize method is working.
Here's a link to my basic page on db -> http://db.tt/gdl3wVox
As you can see small map works fine, but when you click link for "View Bigger Map" there's two problems.
- The main problem - only 1/3 of the map is rendering. Inspecting the element or opening Dev Tools (F12) in either Chrome or IE cause the map to re-render and fit the full width of the div.
- Minor problem - the revealed map is not centered on the marker like the smaller map.
The foundation.css has not been customized other than to add the two elements on this page. So you don't have to go digging for their style, here it is:
#mini-map {
min-width: auto;
max-width: 100%;
width: 220px;
min-height: auto;
max-height: 100%;
height: 154px; }
#big-map {
min-width: auto;
max-width: 100%;
width: 600px;
min-height: auto;
max-height: 100%;
height: 300px; }
I have implemented the google.maps.event.trigger(map, 'resize'); fix as described in other posts (replacing map with bigmap as I have two maps)
<script>
var ourLocation = new google.maps.LatLng(46.213769, -60.266018);
function initialize() {
var mapOptions = {
center: ourLocation,
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
minimap = new google.maps.Map(document.getElementById("mini-map"), mapOptions);
bigmap = new google.maps.Map(document.getElementById("big-map"), mapOptions);
minimarker = new google.maps.Marker({
map: minimap,
draggable: false,
animation: google.maps.Animation.DROP,
position: ourLocation
});
bigmarker = new google.maps.Marker({
map: bigmap,
draggable: false,
animation: google.maps.Animation.DROP,
position: ourLocation
});
}
initialize();
</script>
<script type="text/javascript">
$(document).ready(function () {
$('#myModal1').click(function () {
$('#myModal').reveal();
google.maps.event.trigger(bigmap, 'resize');
});
});
</script>
but this script:
<script type="text/javascript">
$(document).ready(function () {
$('#myModal1').click(function () {
$('#myModal').reveal(); /* Problem is here */
google.maps.event.trigger(bigmap, 'resize');
});
});
</script>
seems to be causing an error for me. When I view the Console in Chrome's Dev Tool I see this:
Uncaught TypeError: Object #<Object> has no method 'reveal' map.html:96
which when drilled down shows another two error:
(anonymous function) map.html:96
handler.proxy zepto.js:933
I'm not sure why it is not working since I replicated the fix in the above topics. I feel guilty for revisiting a "solved" issue but I've tinkered with this for hours now and can't seem to get it working as previous posts have done.
Any clarification would be greatly appreciated, thank you in advance!
You should use
$('#myModal').foundation('reveal', 'open');
to show the modal.
Also, google.maps.event.trigger(bigmap, 'resize'); should be bound to the opened event of the #myModal:
$('#myModal').on('opened', function () {
google.maps.event.trigger(bigmap, 'resize');
});
And check bigmap, it's out of the variable scope.
这篇关于Google Maps API v3 + Foundation 4显示模式无法正常显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
