jQuery SlideToggle谷歌地图问题 [英] jQuery SlideToggle Google Maps Issue

问题描述

我已经阅读过其他类似的帖子，但没有提供任何问题/回复，这可以帮助我们简单地理解我需要做的事情。我使用jQuery版本1.7，这可能解释了为什么其他问题中发布的一些代码是不相似的。

I've read other similar threads but nothing with a question / response which helps make it simple enough to understand what I need to do. I'm using jQuery version 1.7 which possibly explains why some of the code posted in other questions is dissimilar.

谷歌地图加载一个slideToggle的div与中心点偏移到西北部，并且相对于div切换打开时显示的地图部分不可见。我试图得到一个非常简单的地图来显示，没有什么奇特的。

Google maps loads in a slideToggle'd div with the center point offset to the North West and not visible relative to the portion of the map which is displayed when the div is toggled open. I'm trying to get a very simple map to display, nothing fancy.

jQuery(".toggle").click(function () {
    // check the visibility of the next element in the DOM
        jQuery(this).next().slideToggle(); // slide it down
});

我的jQuery知识是有限的，但我知道我需要强制iframe在div后加载切换。我只是不知道如何做到这一点！ HTML / PHP代码如下。

My jQuery knowledge is limited, but I understand I need to force the iframe to load after the div is toggled. I just don't know how to achieve this! The HTML / PHP code is as below.

<span class="toggle">
View Map // with some CSS
</span>

<div id="maps" class="ui-helper-hidden">
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?f=q&amp;source=s_q&amp;hl=en&amp;geocode=&amp;q=<?php echo $latitude;?>,<?php echo $longitude;?>&amp;aq=&amp;t=m&amp;z=13&amp;output=embed&key=123456789"></iframe>
</div>

推荐答案

您可能需要查看动态加载地图JavaScript和Maps API。在这个过程中，您将创建一个中心点对象，然后可以重新使用该对象来重置切换回调函数中的地图中心。

You may need to look at loading the map dynamically using JavaScript and the Maps API. In this process you'll create a center point object which can then be reused to reset the center of the map in the toggle callback function. Something like this should work.

<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=true"></script>
<script type="text/javascript">

    $(function () {

        // create a center
        var c = new google.maps.LatLng(-33.8790, 151.2064);

        //create map options object
        var mapOptions = {
            zoom: 14,
            center: c,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };

        var map = new google.maps.Map(document.getElementById('maps'), mapOptions);

        $(".toggle").click(function () {
            // check the visibility of the next element in the DOM
            $(this).next().slideToggle(300, function(){
                google.maps.event.trigger(map, "resize"); // resize map
                map.setCenter(c); // set the center
            }); // slide it down

        });

    });

</script>

这篇关于jQuery SlideToggle谷歌地图问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！