Geoblogging with Textpattern and the Google Maps API
From Textpattern CMS User Documentation
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.
- 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.
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:
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>
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
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.
- 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.
- 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.
- 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.