Home/ Questions/Q 6860891
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-27T02:27:56+00:00

I am trying to display google map as a tooltip using qTip jquery plugin.

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0