All geek questions in one place

Hidden CSS overflow property causing google map api problems

I am trying to display a google map as a tooltip using the qTip jquery plugin. I have the number of elements on the page and you need to assign overflow: they are hidden for everyone. Everything works fine, except for the google map hint, it doesn't seem to work (it just shows a blank card with the Google logo and terms of service). I need to apply overflow hidden to all blocks except for the tooltip block. When I take global overflow, map display is no problem. Am I using CSS properties incorrectly? How can i fix this? The code is 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>
+4
source share
1 answer

This is not all your code, because you do not even have div elements in your html. However, for most modern browsers (CSS3) this css should fix your problem:

 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 divs and return the overflow to normal.

+2
source

Source: https://habr.com/ru/post/1381964/

More articles:


All Articles