Google Maps无法呈现

Question

Note: I thought it would be better to make a new question on this.

So I recently asked a question about why Google maps is not rendering properly . Now the answer would seem straight forward and simple, accept my code looks like this:

  var map;
  function initialize() {
    var mapOptions = {
         zoom: 8,
         center: new google.maps.LatLng(-34.397, 150.644),
         mapTypeId: google.maps.MapTypeId.ROADMAP
    };

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
    google.maps.event.trigger(map, "resize");
  }

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

The issue is the map is still broken:

This map is stored in a <div id="Map"></div> which has a height of 350. This Div that holds the map is part of Jquery-UI Tabs, so it also has jquery skinning attached to it which may affect things like size and so on.

With that said the map should just work.

If I open the console and throw in: google.maps.event.trigger(map, "resize"); the maps then works as expected.

Answer 1

I also had a Google Map (v3) embedded within a jQuery UI Tabs, and had to work around the issue with this fix:

var initialized = false;

$('.tabs').find('.ui-tabs-nav li').each(function() {
    if($(this).find('a').text() === 'Location') {
        if($(this).hasClass('ui-state-active')) {
            initialize();
            initialized = true;
        } else {
            $(this).click(function() {
                if(!initialized) {
                    initialize();
                    initialized = true;
                }
            });
        }
    }
});

Note that initialize() should run your starting map code. There are lots of ways to slice-and-dice the initialization, but the point is that we don't do it until the tab we're looking for ("Location", in this case) is active.