I am right now in the US for my first week in Mozilla (back to back meetings and lots of discussions and interviews of awesome going on here) and when I got back to the hotel USA had all the Indiana Jones movies playing. Now, I always loved the travel sequences with the moving red line and map and the video of the plane on top (and its copy in Rocket Ranger on C64). As I had my trusty MBA on me I thought I give it a go to re-create the effect in HTML5 - and I did:

You can See the demo online and read the details on the Mozilla hacks blog: Syncing HTML5 video with Google Maps. The source is of course available on GitHub.

I was pretty amazed how easy it is to achieve the effect. Most of playing with HTML5 is simply letting yourself go and have a run for it rather than thinking of how hard it might be.

Things that made me happy this morning:

• Always read the fine print – 7500 online shoppers sold their soul to GameStation – the retailer had a small clause in the terms and conditions about that.
• Finally there is a solution how you can print from your iPad
• Smashing Magazine released my introductory article on using web services with PHP and there are already over 105 comments – most of them very thankful. This was originally a talk at a university hack day in Atlanta, so I am happy that people appreciate simple intros.
• There is a smell map of New York City – nothing to keep your nose out of.
• A very creative set of Google Maps manipulations – I love the battery reserve park.
• Stupid fight compares the followers of celebrities on Twitter and tells you who has the most stupid ones.
• CSS Desk is a dynamic CSS sandbox in the browser – think w3school’s preview on steroids.
• You can now simulate Opera Mini in the browser – as a Java applet.
• Did you know that there is a Braille porn mag for the blind ?
• How to get smoother rounded corners explains a little trick with quite a visual impact.

As part of a larger article, I am currently building some tools that use geographical information. The first one is a pure JavaScript solution to link locations in a text to Google Maps and to show a small map under the text. You can see it in action by clicking the screenshot below.

All you need to do to use the script is get your own Google Maps key and embed the script in the page you want to analyse, giving it the ID of the main text element as a parameter:

You can customise the look and feel by writing your own CSS for the generated HTML and setting the addmap.config.width and addmap.config.height properties to resize the map.

Under the hood here is what happens:

• The script grabs the innerHTML of the element and runs it through the open YQL table of Yahoo Placemaker.
• It then takes the data, assembles the HTML and puts together the URI for the map
• The map gets displayed using the Google static map API

The code of addmap.js is available on GitHub.