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

Question

I have a modal that has 3 links (think tabs) using a hide/show div switch. 1st link is an image. 2nd link is a google map. 3rd link is a 2nd google map. Each are opening fine in the modal. The problem is that initially, the 2nd and 3rd link's map's info windows are very small with only the close button. If I click the 2nd or 3rd link again, the info window finally populates.

It feels like they aren't being redrawn after the resize code, but I'm confused on how to redraw them to fix the problem.

Code I'm using for the maps (other map is the same, but different location):

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

It feels like this line infowindowHelena.open(mapHelena,markerHelena); should be after the resize code, but it isn't working :/

Answer 1

opening the infowindow in the setTimeout works works for me (if I make the infowindow and the marker global):

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

proof of concept fiddles:

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

Answer 2

Try this...

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