2

jQuery タブに 2 つの Google Map API v3 マップがあります。どちらもタブに最初に表示されたときに表示されますが、最初に選択解除されたタブは左上隅にタイルなどを表示するだけです.

google.maps.event.trigger(all_map, 'resize') を定期的に呼び出しても、これは変わりません。

私のコードには次のものがあります。

            <div id='all_map_canvas'>
            </div>
            <script>
                function show_all_map()
                    {
                    var center = new google.maps.LatLng(%(center_latitude)s - .15, %(center_longitude)s + .2);
                    var myoptions = {
                        zoom: %(zoom)s,
                        center: center,
                        mapTypeId: google.maps.MapTypeId.TERRAIN
                        };
                    all_map = new google.maps.Map(document.getElementById('all_map_canvas'), myoptions);
                    all_map.setZoom(%(zoom)s);
                    jQuery('#all_map_canvas').show();
                    google.maps.event.trigger(all_map, 'resize');
                    }
                function show_all_map_markers()
                    {
                    %(all_map_markers)s
                    }
                var markers = [];
                jQuery('#all_map_canvas').width(jQuery(window).width() -    300);
                jQuery('#all_map_canvas').height(jQuery(window).height() -  125);

タブの切り替え後に両方のマップを完全に表示するにはどうすればよいですか?

4

2 に答える 2

0

Googleマップの簡易APIであるgmaps.jsを使用しています。しかし、javascript で tabsshow イベントをアタッチし、デリゲートの関数でマップを更新するだけです。

gmaps.jsに使用するコードは次のとおりです

$('#tabs').bind('tabsshow', function(event, ui) {
    event.preventDefault();
    if (ui.panel.id == "tabs2") {
            //gmaps.js method
            map.refresh();
            map.setCenter(lastLoc.lat(), lastLoc.lng()); 

            //for native google.maps api
            google.maps.event.trigger(map, 'resize');
            map.panTo(new google.maps.LatLng(lastLoc.lat(), lastLoc.lng()));            
    }
});
于 2012-07-24T17:04:22.497 に答える