Friday, August 28, 2009

Accessibility and Google Maps

My understanding about accessibility of a web page is, that all its contents must be accessible without a mouse.

So was the Map Kitchen examples written. Take categories example and you can open any info window by [Tab] key, check the checkboxes by [space]. ([Shift[Tab]] to go back).

Accessibility is in the hands of the developer who writes the code for a map page. It is not built in Google Maps.

Patrick H. Lauke from Opera does not accept my opinion. We had a short public discussion on the forum and our opinions are:

Google Maps control elements (zoom, nav-buttons...) should be keyboard accessible

My opinion:
Those functions are easily made keyboard accessible by the page developer but they are not important. The contents must be accessible. There should be a method to open any info window without mouse.

Patric has made great work with a script that converts Google Maps control buttons keyboard accessible

Usability and Google Maps

What does usability and Google Maps have in common. At least one thing, they are synonyms.

Map is the user interface for any data - any. That is the reason why a search engine company acquired a startup that had the keys for that user interface.

We who write map pages, must keep in mind, that we are using map as the user interface because it is the most intuitive way to present any data. Our client or boss may see map as a decoration on the web page. Try to make them see the difference between a list of addresses or that list presented on a map.

I was very delighted to see that a blog called "In usability we trust" talks a lot about Google Maps. The blog is kept by a Swedish guy called Gabriel Svennerberg. He has written some high quality articles about Google Maps API.

Tuesday, August 11, 2009

Images on v3 map

BoundsBox extension was used for drawing rectangles on map a few posts ago.

The new version of BoundsBox (1.0) has option to insert images inside (visible or invisible) rectangles. The image is attached in a draggable pane of map. So it pans with map. It scales when map is zoomed. It is attached below markers, so it doesn't eat marker clicks. The behavior is equal to GGroundOverlay of v2 api.

A few more options and methods were introduced with the new version. They mainly serve image handling like opacity and z-index. Events 'imageloaded' and 'imageloaderror' are also provided.

See an example with a table of options and methods.

Update v1.1

The most latest version provides also an alternative constructor KmBox(). Instead of LatLngBounds it takes LatLng and kmX, kmY dimensions as its parameters. As a side product we got LatLng.destinationLatLng(bearing, distance) method. That calculates LatLng 'that many kilometers from this LatLng to that compass bearing'.

Curing IE8 complications

Many map pages work fine with all the other browsers but not IE8. Clicks seem to take place far away from the point that user actually clicked.

The bug has been archived in IE8 issue list since beta times. The only known workaround is to force IE8 to "IE7 combatibility mode".

Investigating Microsofts own code reveals that even they have not found any other workaround. You can find in the head section of Bing maps:

<meta http-equiv="X-UA-Compatible" content="IE=7" />

And in

<meta http-equiv=X-UA-Compatible content=IE=EmulateIE7 />

Those tags make IE8 behave more like IE7 and cure the click coordinate issue. If someone is really interested what they actually do, I would recommend starting from this excellent study. What I learned about that article, is that the tag will not pass HTML5 validation.