jQuery SlideToggle Google Maps Issue

问题

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.

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
});

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>

回答1:

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>

来源：https://stackoverflow.com/questions/13733482/jquery-slidetoggle-google-maps-issue

标签

jquery

google-maps

accordion

slidetoggle