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>Just change the TargetDate and DateFormat variables as you like.
<p id="CountText" align="center"></p>
</b></font>
<script type="text/javascript">
// Code loosely adopted from hashemian.com/tools.
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)) %
UnitWrap).toString();
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;
}
UpdateCount();
setInterval("UpdateCount()", 1000);
</script>
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">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.
place = "Still in Cambridge, sadly.";
mapLat = 42.363741;
mapLong = -71.105694;
mapZoom = 10;
</script>
<table cellspacing="0" cellpadding="0"><tr>
<td width="160">
<a style="cursor:pointer;cursor:hand"
onclick="OpenBigMap()">
<script type="text/javascript">
document.write(place);
</script>
</a>
</td><td width="40" align="right">
<a style="cursor:pointer;cursor:hand"
onclick="map.setMapType(G_NORMAL_MAP)">N</a>
<a style="cursor:pointer;cursor:hand"
onclick="map.setMapType(G_SATELLITE_MAP)">S</a>
<a style="cursor:pointer;cursor:hand"
onclick="map.setMapType(G_HYBRID_MAP)">H</a>
</td></tr></table>
<div id="map" style="width:200px; height:200px">
<br>Map loading...</div>
<script
src="http://maps.google.com/maps?file=api&v=2&key=MYKEY"
type="text/javascript"></script>
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">And then add the onload and onunload attributes to the <body> tag:
//<![CDATA[
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));
}
else
{
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";
else
typeText = "";
posText = pos.lat() + "," + pos.lng();
window.open("http://maps.google.com/maps?q=" +
posText + "&ll=" + posText + "&z=" +
zoom + typeText, "MapWindow");
}
//]]>
</script>
<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.
Step aside,
1 comment:
Word! Best of luck on dast ride!
Post a Comment