Of maps and men

Posted on 01 February 2006 by jose

I've embedded a Google Map on this site after raiding Ricardo Galli's blog for his code (and getting an API key, etc.). It's basically a graphical visualization of my server access log, showing how puny my hits really are. It's buggy, but it's up.

The best part is that most of Professor Galli's site is in Spanish, including the instructions for the code, which sets up a sample map. This gave me the chance to get some of the rust off; I have other plans in mind for that, but this was a good start. I suspect that he's running a lower version of MySQL than I am, because his SQL code was disliked by MySQL enough that I had to create the required tables by hand (what agony!). There were only two tables, so it wasn't worth trying to figure out where his SQL was choking MySQL (heh) and correct the SQL syntax.

This map application on my site is already buggy starting out, mostly because of clashes between my CSS file and the CSS that's exported from Google's servers. Already, I see that my a: style changed the style of the TOS link at the bottom right, and at the top right, somehow the text in the map type controls is not aligned properly. The text in the labels is way too big for the map size, so I need to reduce the font size there as well, and maybe left-justify it. Not to mention that the z-index properties of Google's CSS are interfering with my cascading menus; my fix for this last will be relatively simple, though: I'll ignore it by adding enough padding (i.e., text) that the menus will be uncovered and the map won't interfere. Of course, I'll actually have to do higher resolution testing, as I've discovered that the higher resolution desktop/monitor combos at work definitely make my CSS skills look bad.

I wish part of the CSS 3 specifiication included some sort of clearing mechanism for cases like this, where my ideal solution would be to use only Google's CSS in the map area and my own in the other areas. Some sort of clear:all that clears inheritance for all elements in the declared element, so I could have something like <div id="map"> within a <div id="content"> where the map div gets the clear:all statement and thus ignores the CSS for the rest of the site just in that element.

Latest poll

Which do you favor?