Question

我有一个使用hide / show div开关有3个链接（想想标签）的模态。第一个链接是图像。第二个链接是谷歌地图。第3个链接是第二个谷歌地图。每个都在模态中打开。问题是，最初，第二和第三个链接的地图的信息窗口非常小，只有关闭按钮。如果我再次单击第二个或第三个链接，最后会填充信息窗口。

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

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

<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中打开infowindow对我有效（如果我将infowindow和标记全局化）：

$(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>

地图调整后Google地图InfoWindow不会填充

2 个答案: