Feeding WordPress articles to a Google Map

Soon after the release of the China Media Map last week, we implemented a new feature of the map : geo-tagged events. Unfortunately, there isn’t yet a content management system running behind the map, and just a plain database that isn’t easy to update for our editors.

What we decided upon to feed the map with points of interest ended up being the same WordPress blog powering the CMP site. I used two third-party WordPress plugins, wp-json and WP Geo.

WP Geo was chosen for its user-friendly interface that my colleague David Bandurski uses to geotag articles, with the latitude, longitude, zoom level, etc., stored as numbers (rather than in true spatial representation) in specific WordPress meta tables. wp-json in turn extends the feed system by providing a feed of latest entries. I modified the script a little (my version of wp-json.php) so that it also generates the fields stored by WP Geo, as well as to feed by the category specified in the URL. You should change the “~” that we use in place of the default “category” string used to indicate category archives). For better management of articles made specifically for the map, I created special categories starting with “geo-” and whose articles are not displayed on the regular website. Here’s an example of the geo-events JSON feed.

Screenshot-China Media Map - Events

From the map, you would asynchronously get the JSON file from cmp.hku.hk. But being on a different server and domain name, you would necessarily encounter the client-side cross-domain security problem. The solution? Use a proxy script. I wrote one in Python (proxy.py) that goes as follows:

#!/usr/bin/env python
#-*- coding: utf-8
import sys
import pg
import mod_python
import json
import pycurl
import StringIO

def cmp_jsonfeed(req, p):
	prefix = "http://cmp.hku.hk/~/"
	suffix = "/feed/json/"
	url = prefix + p + suffix
	c = pycurl.Curl()
	b = StringIO.StringIO()
	c.setopt(pycurl.URL, url)
	#c.setopt(pycurl.HTTPHEADER, ["Content-Type: text/javascript"])
	c.setopt(pycurl.WRITEFUNCTION, b.write)
	c.setopt(pycurl.FOLLOWLOCATION, 1)
	c.setopt(pycurl.MAXREDIRS, 5)
	return b.getvalue()

I tried the best I could to be secure and not allow just everyone to use my script to make proxy requests of anything. Argument “p” sticks itself between specified prefix and suffix. The following link gets the geo-events JSON feed, brings it to the same domain where you’re making the asynchronous javascript call from, thereby bypassing the cross-domain problem:


The rest is just a matter of parsing the JSON feed in JavaScript and creating the markers and other spaces to fill with the data.

Leave a Reply