jphastings · August 31, 2009 14:31
diff --git a/geo_tumblr.html b/geo_tumblr.html
 <!-- This is a quick rundown of how I got geotagging working in Tumblr via javascript and some hacking. Its in use at http://jpinjapan.tumblr.com - I hope tumblr builds it into their site soon! -->

 <!-- This has to go somewhere at the top of your page, inside your <head>, as javascript -->
 <!-- It prepares the regular expression that finds the geo: tags inside your various tags -->
 var geore = new RegExp(/^geo:(-?\d+\.\d+);(-?\d+\.\d+)$/)

 <!-- You must alter every <div> containing a post to look like this: -->
 <div class="post text" id="post-{PostID}">
 <!-- This is so that the javascript can find the posts it needs to. Its a hack around my unfamiliarity with jQuery really. -->

 <!-- This block must be included at the end of every post type. !-->
 <!-- With a bit of reorganising you can put it inside {block:Posts}{/block:Posts} but outside the individual post type blocks, so you only need to write it once in your theme -->
 {block:HasTags}
 	<ul class="tags" id="tags-{PostID}">
 	{block:Tags}
 		<li><a href="{TagURL}">{Tag}</a></li>
 	{/block:Tags}
 	</ul>
 	<script type="text/javascript">
 	$('#tags-{PostID} li a').each(function(tag) {
 		var m = $(this).text().match(geore);
 		if (m != null) {
 			$('#post-{PostID}').bind("mouseover", function(e){
 				$('#choosepost').hide();
 				$('#map').show();
 				$('#mapimg').attr('src',"http://maps.google.com/staticmap?center="+m[1]+","+m[2]+"&size=257x164&maptype=terrain&hl=en-gb&markers="+m[1]+","+m[2]+",tinygreen&key=YOU_WILL_NEED_A_GOOGLE_MAP_API_KEY&sensor=false");
 				$('#maplink').attr('href',"http://maps.google.co.uk/maps?q="+m[1]+","+m[2]);
 				$('#mapzoomlink').attr('href',"http://maps.google.co.uk/maps?q="+m[1]+","+m[2]);
 			});
 		}
 	});
 	</script>
 	{/block:HasTags}


 <!-- This bit can go anywhere, its where your map will be produced -->
 <div class="map" id="map">
 	<a href="http://maps.google.co.uk/maps?q=Japan" target="map" title="Show on Google Maps" id="maplink"><img src="http://maps.google.com/staticmap?center=DEFAULT_LAT/LONG&zoom=DEFAULT_ZOOM&size=257x164&maptype=terrain&hl=en-gb&key=YOU_WILL_NEED_A_GOOGLE_MAP_API_KEY&sensor=false" id="mapimg"/></a>
 	<a href="http://maps.google.co.uk/maps?q=YOUR_DEFAULT_MAP_URL/QUERY" class="zoomlink" id="mapzoomlink">Zoom</a>
 </div>

 <!-- Finally you'll need some styling -->
 <!-- I've hacked this around the theme I use, so you'll have to taylor it yourself -->
 <style>
 	.map { float:left; margin:8px 0px 4px 0px; position:relative; box-shadow: 0px 2px 5px #000; -webkit-box-shadow: 0px 2px 5px #000; -moz-box-shadow: 0px 2px 5px #000; padding:4px 4px 2px 4px; display:block; background: url(http://static.tumblr.com/xsp9wak/Mwekloi8s/background-container.png) no-repeat left bottom;}
 	.map { display:none;}
 	.map img { border: 1px solid #999; width: 257px; height: 164px;}
 	.map .zoomlink {
 		background: url(http://static.tumblr.com/xsp9wak/ANGkloic5/icon-zoom.png) no-repeat top left;
 		text-indent:-99999em;	
 		display:none;
 		font-size:11px;
 		position:absolute;
 		top:15px;
 		right:15px;
 		width:63px;
 		height:25px;
 		z-index:20;
 	}
 	.map:hover .zoomlink{
 		display:block
 	}
 	/* On the permalink pages I have the map display immediately, I explain how this works in the next section, but we need some extra CSS for it too */
 	{block:PermalinkPage}
 	.map { display: block;}
 	#choosepost { display:none;}
 	{/block:PermalinkPage}
 </style>

 <!-- And finally, so that the permalink pages show the maps immediately, a quick onload in the <body> tag -->
 <body {block:PermalinkPage}onload="$('#post-{PostID}').trigger('mouseover');"{/block:PermalinkPage}>
 	
 <!-- I htink that's it! I did write the code for the tumblog only hours before going on my travels, so it was all written in haste and scattered around the place. This should be all of it! Of course, you can see it in action at http://jpinjapan.tumblr.com -->
	<!-- This is a quick rundown of how I got geotagging working in Tumblr via javascript and some hacking. Its in use at http://jpinjapan.tumblr.com - I hope tumblr builds it into their site soon! -->

	<!-- This has to go somewhere at the top of your page, inside your <head>, as javascript -->
	<!-- It prepares the regular expression that finds the geo: tags inside your various tags -->
	var geore = new RegExp(/^geo:(-?\d+\.\d+);(-?\d+\.\d+)$/)

	<!-- You must alter every <div> containing a post to look like this: -->
	<div class="post text" id="post-{PostID}">
	<!-- This is so that the javascript can find the posts it needs to. Its a hack around my unfamiliarity with jQuery really. -->

	<!-- This block must be included at the end of every post type. !-->
	<!-- With a bit of reorganising you can put it inside {block:Posts}{/block:Posts} but outside the individual post type blocks, so you only need to write it once in your theme -->
	{block:HasTags}
	<ul class="tags" id="tags-{PostID}">
	{block:Tags}
	<li><a href="{TagURL}">{Tag}</a></li>
	{/block:Tags}
	</ul>
	<script type="text/javascript">
	$('#tags-{PostID} li a').each(function(tag) {
	var m = $(this).text().match(geore);
	if (m != null) {
	$('#post-{PostID}').bind("mouseover", function(e){
	$('#choosepost').hide();
	$('#map').show();
	$('#mapimg').attr('src',"http://maps.google.com/staticmap?center="+m[1]+","+m[2]+"&size=257x164&maptype=terrain&hl=en-gb&markers="+m[1]+","+m[2]+",tinygreen&key=YOU_WILL_NEED_A_GOOGLE_MAP_API_KEY&sensor=false");
	$('#maplink').attr('href',"http://maps.google.co.uk/maps?q="+m[1]+","+m[2]);
	$('#mapzoomlink').attr('href',"http://maps.google.co.uk/maps?q="+m[1]+","+m[2]);
	});
	}
	});
	</script>
	{/block:HasTags}


	<!-- This bit can go anywhere, its where your map will be produced -->
	<div class="map" id="map">
	<a href="http://maps.google.co.uk/maps?q=Japan" target="map" title="Show on Google Maps" id="maplink"><img src="http://maps.google.com/staticmap?center=DEFAULT_LAT/LONG&zoom=DEFAULT_ZOOM&size=257x164&maptype=terrain&hl=en-gb&key=YOU_WILL_NEED_A_GOOGLE_MAP_API_KEY&sensor=false" id="mapimg"/></a>
	<a href="http://maps.google.co.uk/maps?q=YOUR_DEFAULT_MAP_URL/QUERY" class="zoomlink" id="mapzoomlink">Zoom</a>
	</div>

	<!-- Finally you'll need some styling -->
	<!-- I've hacked this around the theme I use, so you'll have to taylor it yourself -->
	<style>
	.map { float:left; margin:8px 0px 4px 0px; position:relative; box-shadow: 0px 2px 5px #000; -webkit-box-shadow: 0px 2px 5px #000; -moz-box-shadow: 0px 2px 5px #000; padding:4px 4px 2px 4px; display:block; background: url(http://static.tumblr.com/xsp9wak/Mwekloi8s/background-container.png) no-repeat left bottom;}
	.map { display:none;}
	.map img { border: 1px solid #999; width: 257px; height: 164px;}
	.map .zoomlink {
	background: url(http://static.tumblr.com/xsp9wak/ANGkloic5/icon-zoom.png) no-repeat top left;
	text-indent:-99999em;
	display:none;
	font-size:11px;
	position:absolute;
	top:15px;
	right:15px;
	width:63px;
	height:25px;
	z-index:20;
	}
	.map:hover .zoomlink{
	display:block
	}
	/* On the permalink pages I have the map display immediately, I explain how this works in the next section, but we need some extra CSS for it too */
	{block:PermalinkPage}
	.map { display: block;}
	#choosepost { display:none;}
	{/block:PermalinkPage}
	</style>

	<!-- And finally, so that the permalink pages show the maps immediately, a quick onload in the <body> tag -->
	<body {block:PermalinkPage}onload="$('#post-{PostID}').trigger('mouseover');"{/block:PermalinkPage}>

	<!-- I htink that's it! I did write the code for the tumblog only hours before going on my travels, so it was all written in haste and scattered around the place. This should be all of it! Of course, you can see it in action at http://jpinjapan.tumblr.com -->