Я пытаюсь отобразить карту Google в виде всплывающей подсказки, используя плагин qTip jquery. У меня есть количество элементов на странице, и мне нужно назначить overflow: hidden для всех из них. Все работает отлично, за исключением всплывающей подсказки карты Google, похоже, не работает (просто показывает пустую карту с логотипом Google и условиями обслуживания). Мне нужно применить скрытое переполнение ко всем блокам, кроме блока всплывающей подсказки. Когда я убираю глобальное переполнение, карта отображается без проблем. Я неправильно использую свойства CSS? Как я могу это исправить? Код ниже.
<!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>
