Help?

Geoblogging with Textpattern and the Google Maps API

From Textpattern CMS User Documentation

Contents

Overview

This is a Tutorial that demontrates, how to implement Geoblogging with Textpattern using the Google Maps API. Courtesy David Ramos. Please Note, that this material is copyrighted. Contact the Author for details: Source David Ramos Google Maps in Textpattern.

This tutorial describes how to create a Google Maps “mashup”1 that plots Textpattern articles as points on a map, like the one on the projects page.

What you will need

  • lat and long custom fields associate each article with a particular point.
   A Textpattern map section and map page template hold the map.
   A JavaScript on the page draws the map, the controls, and the points. It pulls data from an XML file elsewhere on       the site.
  • A hidden mapdata section and mapdata form provide the XML data that the JavaScript uses.
   Note that this is the method I used. There are simpler ways to do this. I wanted to create a map from an XML file.      You don’t need to take that approach. You could create a JavaScript on the fly instead.
  • Before you continue, it would help to take a quick look at the Google Maps API documentation and a good Google Maps API Tutorial, if you are new to Google Maps.

The Process

Step 1: Get a Google Maps API Key

Each website using Google Maps needs to get its own key from Google. You can do that by going to Google/Apis/Maps. This key will only work when the site is being accessed from the URL associated with the key.

Step 2: Create the Map section

In Textpattern, create a new section called Map. Set this section so that it uses the page map. No articles go into this section – it’s just the place where we will access the map.


Step 3: Create the Map Page

Create a new page called map. This is going to be the public face for the map. Lay out and style the page however you want.

Insert this line into the head, replacing my text with your Google Maps API Key:

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

Next we need to create a div that will hold the map. Insert this line of HTML into the page body. The width and height of this div will become the width and height of the map. It is essential that this div has a unique id:

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

You can only control the map’s position on the page and its size. Most of the map customization comes in the JavaScript, which we will deal with next.

Step 4: Set up the JavaScript

Before we are finished with the map page, we need to insert a JavaScript that will actually draw the map. You can view my modified script (opens in a new window).

I got this script from Mike Williams Google Maps Tutorial, then modified it slightly so that it would work in Textpattern.2

You need to customize a few lines. First, look at lines 39 and 40:

map.setCenter(new GLatLng(38.61687046392973,-95.2734375), 4);

Here you can specify the initial viewpoint of the map. The first figure is the latitude, and the second is the longitude. The whole-number value (4) is the starting zoom level, where 0 is zoomed all the way out and 17 is zoomed in.

Put this script at the end of the document, right before the </body> tag. It cannot fall within a div or a table. That’s it, we’re finished with the map page template.

Step 5: Test your map

In Textpattern, set the map section so that it uses the page map. If you go to YourSite.com/map, you should see a page with a Google Map. It will be empty, though. We still have to create another section, as a source for map data.

Step 6: Create the Mapdata section

Make another section, called mapdata. The JavaScript will pull its data from this section. The public will never need to view this section.

Create a page called mapdata. Paste this code into the page.

<markers>
<txp:article_custom form="mapdata" limit="999" />
</markers>

On this page, Textpattern lists every article in the site, using the form mapdata. Textpattern will return a maximum of 999 articles.

Make an article form called mapdata. Paste this code into the form:

<txp:if_custom_field name="lat"> 
<marker lat="<txp:custom_field name="lat" />" lng="<txp:custom_field name="long" />" label="<txp:title />">
	<infowindow><![CDATA[
	<p><txp:permlink><txp:title /></txp:permlink></p><txp:excerpt />
	]]></infowindow>
</marker>
</txp:if_custom_field>

This code checks to see if the custom field lat contains data. If the field contains data, Textpattern will make a Google Map popup window for that article, containing a title, permalink, and excerpt.

Set the section mapdata to use the page mapdata.

Step 7: Set up the custom fields

In Textpattern > Admin > Advanced Preferences, create two custom fields, lat and long. These will hold the latitude and longitude associated with each article. Now you’re finished setting up Textpattern to display map data. All you have to do is associate each article with a location.

Step 8: Geocode your articles

You need to add the latitude and longitude of each article that you would like to place on the map. Use a Google Maps compatible geocoding tool like Get_Lon_Lat. Paste the latitude into the lat custom field, and the longitude into the long custom field or use a plugin such as msd_google_map.

Take another look at YourSite.com/map – you should see pushpins for each of your geocoded articles. If you don’t, try refreshing the map and mapdata sections in the browser. You may need to empty the browser cache.

Further Possibilities

  • You can insert other code, like <txp:excerpt /> or the contents of custom fields, into the Google Map popups. Just stick it into the mapdata form alongside the title and permalink.
  • You should be able to figure out how to make these maps show only the posts under a particular category.
  • There’s no reason you can’t use some other JavaScript to create the map.
  • My method steps through each and every article in the site, looking for the custom field lat. For a site with many articles than mine, there is probably a more efficient approach.
  • I used an external XML file because it suited my site, and also out of sheer cussedness. You don’t need to do it this way. Most Google Map mashups insert points that are defined within a custom JavaScript. Just ditch the XML file and generate a JavaScript on the fly. This should be simple for anyone who knows JavaScript reasonably well. (I don’t.)
  • This map only has the concept of a “point.” That’s pathetic. Points do not describe the world. It’s really nice to know about lines and polygons as well. It would be wonderful to associate clickable polylines with articles, instead of the idiotic pushpins that most “Where 2.0™” applications provide by default. (I outgrew pushpin mapping sometime around 4th grade.) I would be delighted if someone would figure out how to add polylines (or even polygons) in Google Maps + Textpattern. I’ll do it myself – but it might take a while.
  • There are open-source, free-data mapping projects around. They promise a more sophisticated view of mapping than Google and its commercial friends are promoting. I’d welcome a way to use these alternative mapping APIs instead of Google’s. I’m following the progress of OpenLayers.

Resources

Author's Resource Page

Author's Implementation

Google Map Api Documentation

Google Map Tutorial

Google Maps Key Retrival

Author's modified Javascript to draw the Map

Get_Lon_Lat Geo-Coding Tool

Translations [?]