调整地图大小后未填充Google Maps InfoWindow

Question

我有一个使用3D隐藏/显示div开关的模态，它具有3个链接（“思考”选项卡）。 第一个链接是一张图片。 第二个链接是谷歌地图。 第三个链接是第二个Google地图。 每个都在模态中打开良好。 问题在于，最初，第二和第三链接的地图的信息窗口很小，只有关闭按钮。 如果再次单击第二或第三链接，信息窗口将最终填充。

感觉好像没有在调整大小代码后重新绘制它们，但是我对如何重新绘制它们以解决问题感到困惑。

我用于地图的代码（其他地图相同，但位置不同）：

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

概念证明：

• 不起作用-您的原始代码
• 工作-经过上述更改

Answer 2

尝试这个...

<script>
    var myCenterHelena=new google.maps.LatLng(46.596994, -112.037184);
    var mapHelena;
    var infowindowHelena = new google.maps.InfoWindow();
    function initializeHelena() {
        var mapOptionsHelena = {
            zoom: 15,
            center: myCenterHelena,
            mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        mapHelena = new google.maps.Map(document.getElementById('modalGoogleMapHelena'),
            mapOptionsHelena
        );

        var markerHelena = new google.maps.Marker({
            position: myCenterHelena,
            animation:google.maps.Animation.BOUNCE,
            map: mapHelena,
            //title: 'ikuw Solutions, Inc'
        });

        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>';

        google.maps.event.addListener(markerHelena,'click', (function(markerHelena,contentStringHelena,infowindowHelena){ 
           return function() {
              infowindowHelena.setContent(contentStringHelena);
              infowindowHelena.open(mapHelena, markerHelena);
           };
        })(markerHelena,contentStringHelena,infowindowHelena));
    }
    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>