Saturday, March 24, 2007

Nerdy stuff

So ... starting the blog. I could either (a) add meaningful content, or (b) add slick javascript counters, zoomable google maps, etc.

Obviously, I chose (b).

And in case you want to do the same, here's what I did.

The count down.
I can't have a road-trip blog under the name "space-jake" without having a countdown to launch. It's pretty simple. Just add an HTML/Javascript page element with the following code:
<font face="Courier" size="+1"><b>
<p id="CountText" align="center"></p>

<script type="text/javascript">
// Code loosely adopted from

TargetDate = "07/13/2007 08:00 UTC-0400";
DateFormat = "T %PM %Dd %H:%M:%S";

function CalcDigits(T, UnitLen, UnitWrap, LeadingZero)
s = ((Math.floor(Math.abs(T) / UnitLen)) %
if( LeadingZero && s.length < 2 )
s = "0" + s;
return s;

function UpdateCount()
var dThen = new Date(TargetDate);
var dNow = new Date();
T = Math.floor((dNow - dThen).valueOf() / 1000);

s = DateFormat;
s = s.replace(/%PM/g, (T <= 0) ? "-" : "+");
s = s.replace(/%D/g, CalcDigits(T, 86400, 1000, 0));
s = s.replace(/%H/g, CalcDigits(T, 3600, 24, 1));
s = s.replace(/%M/g, CalcDigits(T, 60, 60, 1));
s = s.replace(/%S/g, CalcDigits(T, 1, 60, 1));
document.getElementById("CountText").innerHTML = s;

setInterval("UpdateCount()", 1000);
Just change the TargetDate and DateFormat variables as you like.

The map.
The map was a bit harder. I found some good instructions for how to include google maps in blogger, but they didn't quite work. I kept getting an error message about incomplete XML tags when I tried to copy the script line that loads google's javascript into the template code.

So instead I put that line in a HTML/javascript page element. Here's the contents of that element:
<script type="text/javascript">
place = "Still in Cambridge, sadly.";
mapLat = 42.363741;
mapLong = -71.105694;
mapZoom = 10;

<table cellspacing="0" cellpadding="0"><tr>
<td width="160">
<a style="cursor:pointer;cursor:hand"
<script type="text/javascript">
</td><td width="40" align="right">
<a style="cursor:pointer;cursor:hand"
<a style="cursor:pointer;cursor:hand"
<a style="cursor:pointer;cursor:hand"

<div id="map" style="width:200px; height:200px">
<br>Map loading...</div>

So, there are the definition of the current loation, all the interactive page elements, and the script line to load the google maps API. Be sure to change MYKEY to your google maps API key. Sign up here to get one.

The code to setup the map must go elsewhere. (Otherwise it crashes IE. Found that one out the hard way.) In the template HTML, insert the following between the <head> and <body> elements:
<script type="text/javascript">
var map;
function SetupGMap()
var mapField = document.getElementById("map");
if( GBrowserIsCompatible() )
map = new GMap2(mapField);
var pos = new GLatLng(mapLat, mapLong);
map.setCenter(pos, mapZoom);
map.addControl(new GSmallZoomControl());
map.addOverlay(new GMarker(pos));
mapField.innerHTML = "Sorry, your browser
won't support a Google map here.";

function OpenBigMap()
var pos = map.getCenter();
var type = map.getCurrentMapType();
var zoom = map.getZoom();

if( type == G_SATELLITE_MAP )
typeText = "&t=k";
else if( type == G_HYBRID_MAP )
typeText = "&t=h";
typeText = "";
posText = + "," + pos.lng();"" +
posText + "&ll=" + posText + "&z=" +
zoom + typeText, "MapWindow");
And then add the onload and onunload attributes to the <body> tag:
<body onload='SetupGMap()' onunload='GUnload()'>
That's it. If there's some functionality that doesn't seem to be covered by this code, then ... I've probably been hacking with it. But that's the basics.

1 comment:

Russ said...

Word! Best of luck on dast ride!