javascript - Google Maps InfoWindow 在调整 map 大小后不填充

Question

我有一个模态框，它有 3 个链接(想想选项卡)，使用隐藏/显示 div 开关。第一个链接是图像。第二个链接是谷歌地图。第三个链接是第二个谷歌地图。每个都在模态中打开得很好。问题是最初，第二个和第三个链接的 map 信息窗口非常小，只有关闭按钮。如果我再次单击第二个或第三个链接，信息窗口最终会出现。

感觉它们在调整大小代码后没有被重绘，但我对如何重绘它们来解决问题感到困惑。

我用于 map 的代码(其他 map 相同，但位置不同):

<script>
    var myCenterHelena=new google.maps.LatLng(46.596994, -112.037184);
    var mapHelena;
    function initializeHelena() {
        var mapOptionsHelena = {
            zoom: 15,
            center: myCenterHelena,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        mapHelena = new google.maps.Map(document.getElementById('modalGoogleMapHelena'),
            mapOptionsHelena
        );
        var contentStringHelena = '<div id="content">'+
        '<div id="siteNotice">'+
        '</div>'+
        '<div id="firstHeading" class="firstHeading"></div>'+
        '<div id="bodyContent" style="line-height:16px; font-size:14px; padding:10px; text-align:center;">'+
        '<p>ikuw solutions, inc<br>' +
        '863 great northern blvd, ste 103<br>' +
        'helena, mt 59601<br><br>'+
        '<a href="http://www.getikuw.com" style="text-decoration:none; color:#FF8000;">'+
        'www.getikuw.com</a><br>'+
        '844-get-ikuw</p>'+
        '</div>'+
        '</div>';

        var infowindowHelena = new google.maps.InfoWindow({
            content: contentStringHelena
        });

        var markerHelena = new google.maps.Marker({
            position: myCenterHelena,
            animation:google.maps.Animation.BOUNCE,
            map: mapHelena,
            //title: 'ikuw Solutions, Inc'
        });
        infowindowHelena.open(mapHelena,markerHelena);
    }
    google.maps.event.addDomListener(window, 'load', initializeHelena);
    </script>
    <!--resize map after tab load-->
    <script>
    $(document).ready(function(){
        $('a[href=#subDivTab3]').on('click', function() {
            setTimeout(function(){
                //reset map
                google.maps.event.trigger(mapHelena, 'resize');
                // also redefine center
                mapHelena.setCenter(new google.maps.LatLng(46.596994, -112.037184));
            }, 75);
        });
    });
</script>

感觉这行 infowindowHelena.open(mapHelena,markerHelena); 应该在调整大小代码之后，但它不起作用:/

Answer 1

在 setTimeout 中打开信息窗口对我有用(如果我将信息窗口和标记设为全局):

$(document).ready(function () {
    $('a[href=#modalGoogleMapHelena]').on('click', function () {
        setTimeout(function () {
            //reset map
            google.maps.event.trigger(mapHelena, 'resize');
            // also redefine center
            mapHelena.setCenter(new google.maps.LatLng(46.596994, -112.037184));
            infowindowHelena.open(mapHelena, markerHelena);
        }, 75);
    });
});

概念验证 fiddle :

• > not working - your original code
• > working - with above described change