I’ve always been a big fan of MultiMap, but I think with the expertise (not to mention money) of Google now competing against them, I think they’re going to find the mapping market a lot more crowded.

I’ve put together a couple of very simple bookmarklets to query Google maps: the first simply gives the map of a location based on the input (it probably works best with post codes, but you can try town names too).

The second uses Google’s direction finder to show a possible route between 2 locations. Again, entering post codes is probably the best way to do it, but I also noticed in testing that town names, or road names plus a town name may work too (actually, in one of my first tests I accidentally created ‘null’ as an input value, which was translated into Null Road in East Yorkshire; I suspect from the location of the road that it should actually be Hull Road, but I digress).

I wouldn’t know whether the routes chosen are the quickest, best, most scenic etc. – for that sort of information you’ll have to ask my dad ;)

You can try these bookmarklets out by clicking the links, and if you want to keep them for later use, drag the links into your favourites/bookmarks.

• Show location on Google Maps
• Get directions on Google Maps

There’s a few more ideas I’ve had that could be possible with both Google Maps and bookmarklets (with a bit of geo-tagging thrown in). I’ll post them up here when I’ve had chance to think them through and try a few things out, that’s if no-one has beat me to it in the meantime.

Use CSS to style a large first character in a paragraph. An old typography effect.

The Code

The old method

CSS

CSS Code example

HTML

HTML Code example

I’ve never been a big fan of using <span> tags, but for the moment I think this is the only way to achieve this effect.

PHP

For the record, here is the PHP function I use to add the span to a string:
PHP Code example

The Result

I’ve had a redesign, so my old page headings which featured this effect are now gone. I’ll post up another example when I get chance, although if you have a play with the code snippets above you should be able to get it to work anyway.

Produce an accessible, clickable, world map, broken up into continents. (Original idea for The Beat), that would degrade gracefully in browsers without CSS support.

The Process:

The code pretty much speaks for itself, so here are the component parts:

The Graphic

CSS
CSS Code example

HTML
HTML Code Example

The Result:

View the CSS map.

This particular example also includes a CSS rollover to show the continent names.

The Prologue:

• A similar project, recently published on MaxDesign: Remote Control CSS

The web is great for displaying photos to family and friends, but producing web-friendly photos with thumbnails can be a real chore. I wanted to produce a script which would create a thumbnail image from a full size photo.

The Process:

For this to work, the GD library is needed.

PHP Code example

I make no claims as to the code above being my own work – it is a bastardisation of various snippets found around the web, particularly the official PHP site.

If you would like help in implementing this, please leave a comment below.

The Prologue:

• Requires GD to be installed on server.
• High load on server?