today i’m going to talk about how to fix the (annoying?) baloon height when it has images in itself, on Google Maps API v2. Of course, i’ve had so much headache with this problem, i’ve searched all around the web to find how to fix it and of course i found two ways that tell’s how to fix it.
The first method implies that you have to set a fixed height for the baloon, but personaly, i was searching for a more flexible way to get it to work (let’s say that i need to have multiple heights on the baloon because my image would be sometimes in 16:9 and sometimes in 4:3). The second method itself tells about an async load of the image in the baloon about Google Maps API itself, so if you see that the text is going outside the baloon in fact it’s not a text fault but Google cannot found the size of the image because it wasn’t loaded at the moment it was calculating.
So, after reading this i thought “why not mixing them both?” and fact i did it. What i did to fix the height in the baloon, was two simple steps: cache the image before the baloon opens and (ta-da) set an height and a width in the image tag (the height and the width of the image of course). And bingo! the baloon opens quite well and without any sort of problems in any browser (that goes from IE6-8, Firefox 2.x-3.x, Safari, Chrome and Opera).
I hope you will find this useful, because i didn’t found any article that talk about this in the internet so i hope that people will have less headache than me next time we will have to do so :)
We’ll catch the next time with maybe some other cool things i’m preparing like a more functional jQueryUI Autocomplete (with multiple input texts and so on) that i’ll explain when the time will come.
Thanks again for the visit.