Geotagging seems to be on the increase, I’ve tried a couple of the latest additions on alternative platforms, but gravitated back to Textpattern’s non-plugin method of GeoTagging articles to your own map.

(This work-through is replicated on TextBook)

Based on the method described by David Ramos, but uses the newer Google AJAX API Version 2, launched on 3 April, 2006 and includes some extras.
Google AJAX API
Information is entered into Custom Fields, extracted from your web pages, gathered in an XML file, which then in turn serves up the goods to the map javascript. Data may be entered directly into the XML file to provide non-linked markers and non-point specific area area links may also be constructed, all to a variable zoom level.

The actual map page code has been drawn together from the tutorials and code samples on the informative Google Concepts pages, and although not having as many bells and whistles as are available, does the basic job (for me) of linking my blog/photo/painting articles to specific map markers – and back. See my Map which is only showing the location markers in webkit browsers at the moment (I’ll work on fixing it for Mozilla and Opera).
Google API Concepts
The previous problem with this method has been the linking from your page link to centre on a specific point and zoom level on your map. This has been achieved elsewhere using a plugin, but I venture that this method may be more robust during software version upgrades.

Additionally, this method places ICBM meta content into the head section of your site (it could use geo.position – I just prefer ICBM) thus activating the increasingly popular geo-detecting software provided by iCab and the Firefox MiniMap plugin. (They both use our GeoTagIcon – cheers guys!)

Getting Started

Grab yourself an API key from Google, this will be valid for a single “directory” or domain and you have to have a Google Account.
API Sign Up
In Textpattern, set-up new:

  1. Map Page
  2. Map Style (probably required – mine was different to the Default)
  3. Map Section – using the Page and Style you have just set-up above

Insert the following in the head of your Map page, with your newly acquired API Key ***


<script type="text/javascript" src="http://www.google.com/jsapi?key=***"></script>

Create a div for the map using this line of HTML in the body of the page, the size and overall appearance can be governed by your new Map Style. Also add a Message div for co-ordinates – we will come on to that later.


<div id="map"></div>
<div id="message"></div>

Javascript Map Code

Now to insert the script to govern the map which includes tools to:

  1. parse the latitude, longitude and zoom url information presented to the script
  2. provide for custom markers
  3. show marker mouse-over tooltips
  4. set the initial type of map presented and controls available
  5. build the map using variables from your Custom Fields
  6. inserts popup information including zoom function, and
  7. describes the map centre as you move around

I will break down the code according to the numbering above, to illustrate the variable bits, but grab the complete item from the side link and past it into your Map page immediately before the end body tag.
map script complete
Do not try assembling the following chunks, they are not complete – it will not work.

1. In line #21 (of the downloaded txt file) you may fix the variable zoom that the links show and not pass it in the url, to a level to suit you – the alternative line is after OR in this code section.
Here we also set the lat/lng/zmn co-ordinates for the overall map view – play with them to suit yourself – they are all set to 1.


var lat = parseFloat(url.lat);
var lng = parseFloat(url.lng);
var zmn = parseFloat(url.zmn); OR var zmn = 11;
var vars = url.vars;
}
else {
	var lat = 1;
	var lng = 1;
	var zmn = 1;
};

2. Custom Markers are described in groups with an end string which groups them by name. One marker is shown below with the end string of three, just duplicate and change the name for more.

(Please note that at the moment it seems the first is ignored even when called with a “0”. Therefore “1” actually corresponds to the second group – there are two markers in the txt file and correspond to the icons and the shadow provided at the side – store them in your image file.)


var greenIcon = new GIcon();
greenIcon.image = "images/green.png";
greenIcon.shadow = "images/shadow.png";
greenIcon.iconSize = new GSize(12, 20);
greenIcon.shadowSize = new GSize(22, 20);
greenIcon.iconAnchor = new GPoint(12, 40);
greenIcon.infoWindowAnchor = new GPoint(12, 15);
var myIcon = [markerIcon,blueIcon,greenIcon];

3. Style your Tooltips in the CSS file e.g:


.tooltip {
	text-align:center;
	font-size:0.8em;
	white-space:nowrap;
	display:block;
	padding:2px;
	font-weight:bold;
	background:#333333;
		-webkit-border-radius:5px;
		-moz-border-radius:5px;
		-o-border-radius:5px;
		-khtml-border-radius:5px;
	        -webkit-box-shadow: 2px 5px 6px #666666;
	color:#61C402;
}

4. There are options as to the type of map available and the controls on the map. It is set for initial display of the Physical Map, see line 117 and side link for info on the controls available.
Google Controls
A alternative to set initial view to the normal Google Map view is to replace PHYSICAL with NORMAL


	map = new google.maps.Map2(document.getElementById("map"));
        map.setCenter(new google.maps.LatLng(lat,lng), zmn, G_PHYSICAL_MAP);
	map.addControl(new google.maps.LargeMapControl());
	map.addControl(new google.maps.HierarchicalMapTypeControl());
	map.addMapType(G_PHYSICAL_MAP);

5. The main block of the code takes the variables and builds the map, please note the abbreviations used in the code, as we will use these in the Form and Custom Fields later.

6. Information gathered in the Marker Popup bubble is governed here (starting line 150) again note the abbreviations used later, but here is the article title – label which links back to the post, an image and selected text from the Custom Fields – img and txt and the built in zoom feature – set the zoom levels you want.


	    var html = '<div class="markerinfo">';
		html += '<h2><a href="' + url + '">' + label + '</h2></a>';
		html += '<a href="' + url + '"<img src="' + img + '" height="50" class="image"></a><br />';
		html += '<p>' + txt + '</p>';
		html += '<h3><a href="#" onClick="map.setCenter(new google.maps.LatLng(' + lat + ',' + lng + '), 15)">+</a>&nbsp;&nbsp;Zoom&nbsp;&nbsp;<a href="javascript:map.setZoom(7);">-</a></h3></div>';

7. Starting line 164 describes the listener that follows the centre of the map and displays the co-ordinates below the map in my example – this is why the Message div was entered in the page body.


        google.maps.Event.addListener (map, "moveend", function() {
          var center = map.getCenter();
          document.getElementById("message").innerHTML = center.toString();

Making it work

Create a new Textpattern page called Mapdata and paste in the following. (Because Textpattern outputs it’s content as text/html the standard code hs been changed to accept this, at line 128).


<?xml version="1.0" encoding="ISO-8859-1" ?>
<markers>
<txp:article_custom form="mapdata" limit="999" />
</markers>

In Admin > Preferences > Advanced fill-in Custom Fields 1-6 with:

  1. lat
  2. long
  3. txt
  4. url
  5. img
  6. icn

In Presentation > Forms create a new one called mapdata and save as Type: article with the following in:


<txp:if_custom_field name="lat"> 
<marker lat="<txp:custom_field name="lat" />" lng="<txp:custom_field name="long" />" label="<txp:title />"
txt="<txp:custom_field name="txt" />" url="<txp:custom_field name="url" />" img="<txp:custom_field name="img" />" icn="<txp:custom_field name="icn" />">
</marker>
</txp:if_custom_field>

Now this will create the markers on your map, but to create a link from your page to a specific map point, add this to your default article form.

Included is the code for inserting a GeoTag icon (in margin), if you like you could add text to the link by including the tag for the txt Custom Field:


<txp:if_custom_field name="lat"> 
<p><a href="<txp:site_url />map?lat=<txp:custom_field name="lat" />&amp;lng=<txp:custom_field name="long" />&amp;zmn=11"><img src="/images/geotag.png" alt="" border="0" title="map view" /></a></p>
</txp:if_custom_field>

If you used a fixed zoom level in your code, then you should remove &zmn=11 from the above. I have put the fixed level here to enable me to send links set at a point and zoom level (governed by the url), to show an area without a marker – example

If you want a variable zoom for every link, create another Custom Field for zmn and add the relevant txp:custom_field name=“zmn” tag to the Default Form.

Meta Content

To place the ICBM content in the document head, place the following in the head section of the page – which will probably be your blog page:


<txp:if_individual_article>
<txp:if_custom_field name="lat">
<meta name="ICBM" content="<txp:custom_field name="lat" />, <txp:custom_field name="long" />" />
</txp:if_custom_field>
</txp:if_individual_article>

There are a few sites on the net that will give you the co-ordinates for latitude and longitude – when but when yours is up and running, you can estimate the centre co-ordinates reasonably accurate here. I’ll look into putting fixed cross-hairs in the centre later.
Map Maker
Have a look at the source code for my map page to see other little bits I’ve added and may well add after I’ve written this. If I’ve dropped a bollock here, or you’ve any questions, let me know – I’ll try to help.