Question

我正在更新房地产经纪人的网站，并希望将Google地图添加到对象页面。地图将显示在选项卡式容器中。对于标签我正在使用IDTabs，一个小的jQuery插件。

地图呈现，但似乎地图本身的定位已关闭。 UI呈现全宽，但地图本身并不是。移动地图后，它也不会移动到容器的宽度。调整窗口大小后，它会重新初始化，然后地图会覆盖Maps UI容器的整个宽度。

您可以在此处查看：http://symvo.li/harbourtown/rental.php?id=1 （点击地图）

代码：

var map;
function initialize() {
    geocoder = new google.maps.Geocoder();

                    var mapOptions = {
                        zoom: 8,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };
                    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

                    geocoder.geocode( { 'address': 'Kaya Sa 1, Bonaire'}, function(results, status) {
                        if(status == google.maps.GeocoderStatus.OK) {
                            map.setCenter(results[0].geometry.location);
                            var marker = new google.maps.Marker({
                              map: map,
                              position: results[0].geometry.location
                            });
                        }
                    });

                }
                google.maps.event.addDomListener(window, 'load', initialize);

如何确保地图呈现正确？

Answer 1

我在这篇文章的帮助下解决了这个问题：Why doesn't my map render in a jQuery tab?

由于地图在隐藏标签中呈现，因此无法正确设置地图的大小。为了解决这个问题，我在单击选项卡时调用了resize事件。

google.maps.event.trigger(map, 'resize');

Google地图无法在jquery标签插件中正确呈现

1 个答案: