• A link to Google Maps when JavaScript is disabled.
• Support for the Google AJAX API Loader.
• Using the small map control.
• Keyboard accessibility for all control elements within the map.

As a fallback without JavaScript — because people disable it, because their mobile device doesn’t support it, or because it gets filtered by corporate proxies — Patrick used the little known Google Static Maps API, but for some reason he missed adding the link to Google. Here is the fix:

1. <div id="map">
2. <a href="http://maps.google.com/maps ?f=q&amp;output=html &amp;q=50.110950+8.684666" title="Google Maps">
3. <img src="http://maps.google.com/staticmap?hl=en &amp;center=50.112267,8.678384 &amp;markers=50.110950,8.684666,red &amp;zoom=15&amp;size=500x300 &amp;key=[Your API Key]" alt="City map of Frankfurt" width="500" height="300" />
4. </a>
5. </div>

Then I changed how the map is embedded. As it seems that the API loader is more current, I preferred that way:

1. <script type="text/javascript" src="http://www.google.com/jsapi?key=[Your API Key]"></script>
2. <script type="text/javascript" src="/js/accgmap.js"></script>
3. <script type="text/javascript">
4. google.load( 'maps', '2', { 'language' : 'en' } );
5. google.setOnLoadCallback( GMAP.initMap );
6. </script>

Using the small control elements is trivial: SmallMapControl(). The next thing I wanted to change was keyboard access to all controls, in particular for the map type, i.e. Map | Satellite | Hybrid. Patrick refers to an id, but I found that all relevant controls have a title, so I just checked for that attribute. I also dropped setting the style attribute in JavaScript as that belongs in the CSS file. His original function GKeyboardPatch() now looks like this (note the while loop for a slightly better performance):

1. GKeyboardPatch: function( map ) {
2. var button, divs = map.getContainer().getElementsByTagName( 'div' );
3. var i = 0;
4. while ( divs[i] ) {
5. if ( divs[i].getAttribute( 'log' ) || ( divs[i].getAttribute( 'title' ) && divs[i].getAttribute( 'title' ) != '' ) ) {
6. button = document.createElement( 'button' );
7. button.setAttribute( 'value', divs[i].getAttribute( 'title' ));
8. divs[i].appendChild( button );
9. if ( divs[i].getAttribute( 'log' )) { // only control buttons
10. // override the IE opacity filter that Google annoyingly sets
11. divs[i].style.filter = '';
12. // should really set to 'transparent'
13. divs[i].style.background = 'url( http://www.google.com/ intl/en_ALL/mapfiles/transparent.png )';
14. }
15. }
16. i++;
17. }
18. }

Now remember I said I’d rather separate style and behaviour, so here are a some lines of CSS with the setting of width and height for the #map being most relevant, otherwise it will collapse:

1. #map {
2. height: 300px;
3. overflow: hidden;
4. position: relative;
5. width: 500px;
6. }
7. #maps-static, #maps-static img {
8. display: block;
9. }
10. #map span.note {
11. display: none;
12. }
13. #map button {
14. background: transparent;
15. border-style: solid;
16. border-width: 0;
17. cursor: pointer;
18. height: 100%;
19. left: -2px;
20. margin: 2px;
21. overflow: hidden;
22. padding: 2px;
23. position: absolute;
24. text-indent: -100em;
25. top: -2px;
26. width: 100%;
27. }
28. #map a:focus, #map a:active, #map button:focus, #map button:active {
29. outline: 2px dashed #61bf1a;
30. }

And that’s it, thanks again to Patrick for the solid foundation I built upon. Now download the JavaScript code and try to tab through the map below.

Actually on the other website I extracted hCard microformats from the page as well and displayed the addresses on the map, but I was lazy and used jQuery. I thought it doesn’t look well here mixed with Patrick’s clean DOM scripting, but feel free to take it from the original website.

When designing a site for a person who is so empathic we deemed it consequential not to exclude any users. After a little debate with our designers we settled on a color scheme that fulfills most requirements for color contrast. Furthermore text is resizable, forms are labeled, the structure is semantic: in the German accessibility test we got 98 out of 100 points.

There are little mashups including Google Maps and a journey planner for public transport. You can get decent print results, a customized error page, the site is language negotiated and thus loads your preferred language version automatically. Loading is extremely fast since we’ve learned our performance lessons, and of course everything is microformatted.

I must admit it’s difficult to microformat “Dalai Lama,” because it is a role, not a name. fn is required, but the text only refers to the title and role “His Holiness the 14th Dalai Lama.” His monastic name is of course Tenzin Gyatso, his family name is Lhamo, and his given name Thondup, but the text doesn’t mention any of these. I’m afraid microformats do not properly reflect this. How do you markup “the Pope?”

We used WordPress as a simple content management system with a self-written plug-in to clean up the comments template — the default error messages were so unacceptable. Alas we ended up with one installation for each language because the existing internationalization plug-ins were immature. Special credits to Jessica Spengler for the excellent and sensitive text translation!

I don’t think that modern technology and something ancient as Tibetan buddhism really contradict each other. In fact topics like sustainability, responsibility and empathy become more important in our work environment. Whenever the Science meets Dharma project would call for experienced web developers I’m sure we would find many willing to share their knowledge with Tibetan monks and get an insight into their wisdom and philosophy in return.