I'm currently working with Google Maps to display an InfoWindow using the InfoBubble library. The issue I'm encountering is that when I try to show an image outside of a div using CSS properties, only half of the image displays within the div.
Below is my CSS code:
#wider-header{
overflow: hidden;
display:inline-block;
width: 100px;
height: 300px;
}
#wide-header img {
position:relative;
top:-70px;
float:right;
border-radius: 50% 50% 50% 50%;
border: 2px solid #d81f27;
}
And here is the JavaScript:
infoBubble2 = new InfoBubble({
map: map,
content: "<div id='wide-header'><img id='jdImg' src='http://i.telegraph.co.uk/multimedia/archive/02474/cat-eyebrows-1_2474686k.jpg' width='100' height='100' alt='userImage'></div>",
position: new google.maps.LatLng(-35, 151),
padding: 10,
backgroundColor: '#fff',
borderRadius: 4,
arrowSize: 10,
borderWidth: 1,
borderColor: '#2c2c2c',
disableAutoPan: false,
hideCloseButton: true,
arrowPosition: 50,
arrowStyle: 3
});
infoBubble2.open();
The current code produces this result:
Any ideas on how to resolve this issue?