Online maps are sometimes used with stories to illustrate the location of the news event. The Rocky Mountain News uses map snippets with locator pinpoints, and the Denver Post uses an online map to locate homes lit with holiday lights and a Yahoo AJAX map in combination with Yahoo Pipes to pinpoint recent earthquakes.

Both Yahoo and Google provide mapping APIs which allow any web site or blog to embed an interactive map.

Although it’s not easy, simple maps can be embedded on blogger.com blogs using the Google maps API. Follow these steps to add a one-pinpoint map (similar to the Rocky’s map).

1) Go to the Google API area and sign up for an API key, which is an assigned number that allows you to use the service. Enter the URL of your blog. (i.e. myblog.blogspot.com). Copy the API code to a convenient place — you’ll use it in a second.

2) Second, you’ll need to geolocate the map’s center and our pinpointed location using an address geocoder. Get the latitude and longitude of The Armory Building at CU, located at 1511 University Avenue in Boulder. (Lat/Long are 40.010387, -105.273995). You can geolocate & pinpoint any other address if you’d like.

3) Next, copy your API into the code below labeled “your API key goes here.” (In other words, replace the “your API code goes here” with your API key. Items to replace/alter are in bold.) Be sure to eliminate extra spaces and make sure the equals sign (=) is on the left and the double quotes mark (”) is on the right of the API.

Also replace the Lat/Long numbers with the Lat/Long numbers for The Armory Building.

Paste the code with your own API key, and the new Lat/Long settings, into the <head> section of your blog template. (Found via the templates tab and edit HTML.)

Here’s the coding script (copy everything including the start script and end script tags):

<script src="http://maps.google.com/maps?file=api&v=2&key=your API key goes here"
type="text/javascript"></script>
<script type="text/javascript">

function initialize() {
if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map_canvas"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(39.99,-104.80), 12);

var point = new GLatLng(39.98,-104.80);
map.addOverlay(new GMarker(point));
}
}
</script>

4) Also in the head area of your blogger.com template, just after the (end) </head> tag, replace the <body> tag with:

<body onload="initialize()" onunload="GUnload()">

Save your template, then navigate to your blogger.com blog posting area.

5) Place this code in a post where you want the map to appear. The map size can be adjusted by altering the width: and height: tags.

<div id="map_canvas" style="width: 600px; height: 600px"></div>

6) That’s it — your map should now center on The Armory Building, with a pinpoint marker in the center.

Date: Mar 5th, 2008 · Comments RSS · Tags: Newsroom '08