CSS overflow hidden property causing problems with google map api

问题

I am trying to display google map as a tooltip using qTip jquery plugin. I have number of elements on the page and need to assign overflow: hidden to all of them. Everything works great, except for the google map tooltip does not seem to work (just shows blank map with Google logo & terms of service). I need to apply the overflow hidden to all the blocks except for the tooltip block. When I take the global overflow out, the map showup without a problem. Am I using the CSS properties incorrectly? How can I fix this? Code below.

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org  /TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.js"></script>
    <script type="text/javascript" src='jquery.qtip-1.0.0-rc3.min.js'></script>
    <script type="text/javascript" src="http://maps.google.com/maps/apijs?sensor=false"></script>
    <script type="text/javascript">
    jQuery(document).ready(function(){
geocoder = new google.maps.Geocoder();
            jQuery('td.a').each(function(i){
                jQuery(this).qtip({
                    content: {
                        text: '<div id="map_canvas_'+i+'" latlon="'+jQuery('td.a').attr('tooltip')+'" addr="'+jQuery('td.a').attr('address')+'" style="width: 450px; height: 300px"></div>'
                    },
              show: {
                 delay: 500,
                 when: 'click',
                 solo: true,
                 effect: { type: 'grow', length: 310 }
              },
              hide : {
                 when : {
                    event : 'unfocus'
                 }
              },
          position: { adjust: { screen: true } },
          style: {
        width: 490,
     height: 300,
              border: {
                 width: 5,
                 radius: 10
              },
              padding: 10,align: 'center',                
     tip: true
     },
              api: {
                 onShow : function() {

                         var ll = jQuery('#map_canvas_'+i).attr('latlon');
                         var latlong = ll.split(',');
                         var reslonger = new google.maps.LatLng(-34.397, 150.644);


                         geocoder.geocode({'address':jQuery('#map_canvas_'+i).attr('addr')},function(results,status){
                         if (status == google.maps.GeocoderStatus.OK) {
                         reslonger = results[0].geometry.location;
                         //alert(reslonger);

                    var reslong = new google.maps.LatLng(latlong[0], latlong[1]);
                    var myOptions = {
                          zoom: 15,
                          center: reslonger,
                          mapTypeId: google.maps.MapTypeId.ROADMAP
                          };
                    var map = new google.maps.Map(document.getElementById('map_canvas_'+i), myOptions);
                    var marker = new google.maps.Marker({
                          position: reslonger,
                          map: map,
                          title:jQuery('#map_canvas_'+i).attr('addr') });                 
                         }else {
    alert("Geocode was not successful for the following reason: " + status);}
                         } );       
                 }
              }
                });
            });
    });
    </script>
    <style>
    div
    {
        overflow: hidden;
    }
    </style>
    </head>
    <body>
    <table style="height: auto" border="1" cellspacing="0" cellpadding="2" width="400">
    <tbody>
        <tr>
            <td class="a" width="100" address="92123">
                92123
            </td>
            <td class="a" width="100" address="91910">
                91910
            </td>
            <td class="a" width="100" tooltip="38.8921,-77.033689" address="92154">
                92154
            </td>
            <td class="a" width="100" tooltip="38.89051,-77.086294" address="90210">
                90210
            </td>
        </tr>
          </tbody>
</table>
    </body>
    </html>

回答1:

This must not be all your code, because you don't even have any div items in your html. However, for most modern browsers (CSS3), this css should fix your issue:

div[id^=map_canvas], 
div[id^=map_canvas] div {overflow: auto;}

This will target any map_canvas generated by the script and all its child div's and set the overflow back to normal.

来源：https://stackoverflow.com/questions/8188761/css-overflow-hidden-property-causing-problems-with-google-map-api

标签

css

google-maps-api-3

overflow

hidden