Minor tweak, major improvement
On Tuesday, 2 January 2007, I made a minor update to my Blues Brothers map that both improved its function and reduced the number of extraneous image GETs.
The long of it… Previously, when clicking on a marker, the popup balloon would be undersized for the content. Part of the screen capture image and any text below it would be superimposed on the map rather than on a nice clean white background, making it hard to read. Clicking on the marker a second time would redraw the balloon in a proper size, but each click sends another GET command for the image (even though the subsequent clicks usually result in a “304 – not modified” response).
I was stuck on thinking that a fix would require some complicated and obscure tweaking of the Google Maps API, but the actual solution is mindlessly simple. My sudden realisation may be considered a dope-slap epiphany. When the balloon is first drawn, the image has not yet been downloaded, so the browser doesn’t know how big it is. It assumes that the image is 0 pixels high, and draws the balloon accordingly. (This seems like a silly assumption, but I suppose it’s better than assuming it’s 1000 pixels high.) Then the image is downloaded, and since it’s much more than 0 pixels high, it overshoots the bottom of the balloon. Follow-up clicks redraw the balloon, and now since the browser knows the image size in advance, the balloon is drawn in a proper size.
To fix it, all I needed to do was include the height of the image in its tag, thus giving the browser advance warning. I added another variable to the data set: iheight. The elegant part of this is that with only a few exceptions, all of the images are 100 pixels high. Therefore the iheight declaration only needs to be included in the exceptional entries. The code now checks for iheight==null, and if so automatically sets the value to 100. All the code to accomplish this only increased the total download size by 207 bytes. This margin is more than absorbed by a reduced need to click twice on each marker.
By early Wednesday morning, the logs were showing success. A visitor arrived and viewed nearly every marker on the map—yet only clicked once on each.