3

私は他の同様のスレッドを読みましたが、私が何をする必要があるかを理解するのに十分簡単に​​するのに役立つ質問/応答はありません。私はjQueryバージョン1.7を使用しています。これは、他の質問に投稿されたコードの一部が異なる理由を説明している可能性があります。

Googleマップは、中心点が北西にオフセットされたslideToggle'd divに読み込まれ、divがトグルされて開いたときに表示されるマップの部分に対しては表示されません。非常にシンプルな地図を表示しようとしていますが、派手なものは何もありません。

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

私のjQueryの知識は限られていますが、divが切り替えられた後にiframeを強制的にロードする必要があることを理解しています。これを達成する方法がわかりません！HTML/PHPコードは以下の通りです。

<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>
4

1 に答える 1

3

JavaScriptとMapsAPIを使用して、マップを動的にロードすることを検討する必要がある場合があります。このプロセスでは、中心点オブジェクトを作成します。このオブジェクトを再利用して、トグルコールバック関数でマップの中心をリセットできます。このようなものが機能するはずです。

<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>
于 2012-12-05T23:54:30.490 に答える