This is just a collection of a few odds and ends encountered during the first week of opening up the ChallengeMap to the public.

Safari, InfoWindows, and formatting

Google Maps’ InfoWindows (the bubbles that appear when you click on a marker) are broken for Safari. It will add linebreaks after pretty much every word. After a bit of googling around, Google Groups (notice a pattern here?) reveals a helpful thread. Basically, you need to wrap all your text into a <div> tag with a width style element. Like this: 

  <div style="width:204px;">some text</div>
204 pixels is the same width Google Maps use by default if they can’t determine the width of the containing text.

Better XML

It had to happen – somehow, invalid elements snuck into my XML. I don’t know where they came from, since my source data is HTML – at least a close enough relative. They still happen. And if they sneak into the XML data file for the markers, the markers will just not appear.

And, just to compound matters, the offending entities are different for Safari and IE. Safari complains about entities like &oelig; “&oelig” – which is silly, since the file should be treated as XML, and those entities are meaningless unless defined in a DTD. IE chokes on “&”, which is less silly, since it’s part of, for example &lt;, which is used to escape “<” inside tags. (Of course, Safari can stand that. And Firefox has yet another set of issues…)

The point remains, though – it breaks my application, and there’s no way to predict how and why. So the solution is, “replace all unknown entities”, and “Check the data file in each browser”. Thankfully, they even offer the line number where they choked, so it’s fairly easy to fix if I run into a new issue. Technically, I probably should be wrapping the text into a CDATA section. It’s on the to-do list ;)

Previous Articles

If you just stumbled upon this page and want to know more about challenge maps, here are the previous ones:

Leave a reply