Google Maps Api v3 Maps in Ui-Tabs are cut

Question

I know this is a common problem here, i already look at all the topics here for a solution, but still, when i change tabs i continue with this problem:

Answer 1

You need to set the center and trigger a re-size event.

MyMap.setCenter(MyCenterCoords);
google.maps.event.trigger(MyMap, 'resize');

Answer 2

This code google.maps.event.trigger(map, 'resize') should be in the pageshow like below.

$('#map_result').live('pageshow',function(event){
    google.maps.event.trigger(map, 'resize');
}); 

By the way, have you found the solutions for this? I actually make it works using css.

Answer 3

I know its not a elegant solution, but you can just add an Iframe inside each tab. and when you click the tab, the map load with the correct sizes.

Answer 4

I found the clean solution:

<script type="text/javascript">
         function showAddressMap(){
                var mapOptions = {    
                          zoom: 15,
                          mapTypeId: google.maps.MapTypeId.ROADMAP
                         }

                var map = new google.maps.Map(document.getElementById("map_canvas"), mapOptions);

                 geocoder = new google.maps.Geocoder();
            // searchQuery is the address I used this in a JSP so I called with $
                 geocoder.geocode( {'address': "${searchQuery}"}, function(results, status) {
                        if (status == google.maps.GeocoderStatus.OK) {
                          map.setCenter(results[0].geometry.location);
                          var marker = new google.maps.Marker({
                              map: map,
                              position: results[0].geometry.location
                          });
                        } else {
                          alert("Geocode was not successful for the following reason: " + status);
                        }
                 });
                 google.maps.event.trigger(map, 'resize');

             //}
          }

          JQ(document).ready(function(){
            JQ('#tabs').tabs();
            JQ('#maptab').bind('click', function() {
                showAddressMap();
            });
          });
        </script>



    <div id="tabs">
        <li><a href="#tabs-1" id="maptab"><fmt:message key="fieldset.map"/></a></li>
    </div>
    <div id="tabs-1">
    <fieldset>
            <div id="map_canvas" style="height:500px; width:100%;"></div>
    </fieldset>
    </div>