Posts Tagged ‘googlemaps’

Indiana Jones maps with HTML5 and Google Maps

Thursday, December 16th, 2010

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.

TTMMHTM: Rounded, Braille, selling your soul and printing from an iPad

Friday, April 16th, 2010

Things that made me happy this morning:

Adding map links and a small map to any text using JavaScript – addmap.js

Friday, January 29th, 2010

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.

Analyse text and add a map with its locations in pure JavaScript by  you.

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:

<script src="http://github.com/codepo8/geotoys/raw/master/addmap.js"></script>
<script>
addmap.config.mapkey = 'YOUR_API_KEY';
addmap.analyse('content');
</script>

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 code of addmap.js is available on GitHub.