Geotagging, for real this time « A world wide web of LIES

Geotagging, for real this time

Posted: January 23, 2010
Filed under: Words and Expressions
Tagged: admin, code

(THIS USED TO BE A FEW DIFFERENT POSTS)

Since I couldn’t figure out a free/painless way to edit a million photos’ EXIF data, I made a shortcode instead, and will just enter locations by hand in the post.

The basics

I put this in my theme’s functions.php file:

function geotag($atts) {
	extract(shortcode_atts(array(
		'n' => '41.000',   # default value if none entered in shortcode
		'w' => '-93.000',  # default value if none entered in shortcode
		't' => 'Earth',    # default value if none entered in shortcode
		'z' => '16',       # default value if none entered in shortcode
	), $atts));

	# do it
	return "Location: {$n}&deg; N, {$w}&deg; E (<a href=\"http://maps.google.com/maps?q={$n}+{$w}&#038;t=h&#038;z={$z}&#038;output=embed">Gmap!</a>)";
}
add_shortcode('geo', 'geotag');

And the shortcode looks like this:

[geo t="The Space Needle" n="47.620484" w="-122.349544" z="19"]

A-and typing THAT into your post (or image caption) gives you THIS:

Location: 47.620484° N, -122.349544° E (Gmap!)

NOTES:

The highlighted portion in the code snippet is for a no-whitespace, all map view of the Gmap (good for popups or iframes).
Go here to learn all about the parameters for Google Maps URLs. That’s what I did.
This post probably won’t be much help if you know even less php than me. If you click all the links, it will explain the rest of it better than I can. (I am mostly writing all this down in case I suffer a blow to the head and suddenly forget everything.)
The default coordinates are a reference to the greatest song ever recorded.
????
Profit!

Getting fancy

There are a few different ways you can display the map info, all of which I’ve tried, and only one of which I liked. I’ll save that one for last.

A regular old link:

Since I hate popups so much, and I couldn’t get the thickbox/iframe method to work, I settled for this.

return "Location: {$n}&deg; N, {$w}&deg; E (<a href=\"http://maps.google.com/maps?q={$n}+{$w}&#038;ll={$n},{$w}&#038;t=h&#038;z={$z}\"
	target=\"_blank\" title=\"{$t} (opens in new window, sorry)\">Gmap!</a>)";

A popup:

If you don’t hate popups, and don’t think any of your readers will mind, here you go (note the use of the optional bits from the original snippet).

return "Location: {$n}&deg; N, {$w}&deg; E (<a href=\"http://maps.google.com/maps?q={$n}+{$w}&#038;ll={$n},{$w}&#038;t=h&#038;z={$z}&#038;output=embed\"
	onclick=\"window.open('http://maps.google.com/maps?q={$n}+{$w}&#038;ll={$n},{$w}&#038;t=h&#038;z={$z}&#038;output=embed','popup','width=800,height=600,scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,menubar=no,status=no,left=20,top=20'); return false\"
	title=\"{$t} (popup, sorry)\">Gmap!</a>)";

Getting really fancy

This is the one that gave me so much grief trying to figure out. It requires jquery and thickbox to work, and displays the map in a purty iframe. The problem was that the jquery stuff you add to a url to make it show in an iframe was confusing Google Maps, since their url has its own set of queries. So I’d get maps that wouldn’t be centered, or wouldn’t finish loading. Then (like seven months later), I learned you can use thickbox to display hidden content that’s already on your page. So I had my code write a hidden div, which had an iframe, which contained the actual map.

First, add a definition to the array:

'i' => 'mappyhide',   # default value if none entered in shortcode

This is in case you want to have more than one of these things on a page, but I wouldn’t do too many. Anyway, the shortcode would look like this:

[geo i="Sneedle" `t="The Space Needle" n="47.620484" w="-122.349544" z="19"]

Then, edit the “do it” part:

return "Location: {$n}&deg; N, {$w}&deg; E (<a href=\"#TB_inline?width=800&height=600&inlineId={$i}\" class=\"thickbox\" title=\"{$t}\">Gmap!</a>)
	<div id=\"{$i}\" style=\"display:none;\">
		<div style=\"margin: 0; padding: 0; width: 100%; height: 100%;\">
			<iframe src=\"http://maps.google.com/maps?q={$n}+{$w}&ll={$n},{$w}&t=h&z={$z}&output=embed\"></iframe>
		</div>
	</div>";

Oh, just stop it

So, what if you want to make an inline link, like, with text?

function igeotag($atts) {
	extract(shortcode_atts(array(
		'i' => 'mappyhide',   # default value if none entered in shortcode
		'i' => 'linkytext',   # default value if none entered in shortcode
		'n' => '41.000',      # default value if none entered in shortcode
		'w' => '-93.000',     # default value if none entered in shortcode
		't' => 'Earth',       # default value if none entered in shortcode
		'z' => '16',          # default value if none entered in shortcode
	), $atts));

	# do it (no linebreaks or indents, to prevent unwanted whitespace on page)
	return "<a href=\"#TB_inline?width=800&height=600&inlineId={$i}\" class=\"thickbox\" title=\"{$t}\">{$l}<span id=\"{$i}\" style=\"display:none;\"><span style=\"display: inline-block; margin: 0; padding: 0; width: 100%; height: 100%;\"><iframe src=\"http://maps.google.com/maps?q={$n}+{$w}&ll={$n},{$w}&t=h&z={$z}&output=embed\"></iframe></span></span></a>";
}
add_shortcode('igeo', 'igeotag');

And the shortcode looks like this:

[igeo i="InlineSneedle" l="SWEET" t="The Space Needle is hella sweet" n="47.620484" w="-122.349544" z="19"]

Which results in the word SWEET being a link!

Disclaimer

I suck at html, css, php, making any of the aforementioned valid, and the less mentioned about my documentation skills the better. So if anything blows up, it’s your problem.

A world wide web of LIES