Today I was frustrated (again) by the fact that when you pop open an
info window (using a marker's openInfoWindowHtml function), and the
HTML contains <img> tags, the images often do not fit inside the
"bubble"; they stick out on the left and/or bottom. The problem, of
course, is that the API doesn't know how big the content will be until
after the images load. The second time you open an info window, it
looks fine, because the images have been cached.
One solution to this problem is to add height and width attributes to
the IMG tag. Unfortunately, sometimes that's not possible. For
example, today I was trying to load in a KML file that came from
picasa.com; there were images in all the placemarks' descriptions, but
no height and width specified, and no way to add them automatically.
Another solution I've seen proposed is to pre-load the content of all
the markers in an invisible or off-screen DIV. But that's a bad idea
if there's 100 markers and people might only click one or two.
.
I was thinking about it today, and I think I found a good compromise:
pre-load the info window content out of sight, but only for one marker
at a time, and only when you mouseover that marker! It works because
any time you're going to click on a marker, you're going to move your
mouse over it first.
I've been trying it with maps on GPSVisualizer.com, and it seems to
work well. The only pitfall is that if you move your mouse over
dozens of markers, they'll all load. But it's certainly better than
pre-loading EVERY marker on the map.
