I am struggling to showcase a Google map as a tooltip using the qTip jQuery plugin. I have multiple elements on my page and need to assign overflow: hidden to all of them. Everything is functioning properly, except for the fact that the Google map tooltip is not working as expected (it just displays a blank map with the Google logo and terms of service). I want to apply the overflow hidden style to all blocks except for the tooltip block. If I remove the global overflow setting, the map appears without any issues. Am I incorrectly using the CSS properties? How can I rectify this issue? Check out the 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>