If you’re not someone using WordPress, this post is not going to be of any interest.
Brian over at Fitzroyalty asks whether it’s possible to order content on a blog relative to reader’s location. It is. Here’s how, or at least here’s how to add a button to the sidebar/menu on a WordPress blog that:
- Detects a user’s location
- Finds a list of posts that is closest to the user’s mobile location using the Geo Mashup plugin
I know that this is a terrible hack to get something done quickly. I’m not much of a coder and I’m sure that there is a better way to get this done using Geo Mashup, but as far as I can find, nobody else has done this before.
Here’s how to do it.
1. Get the Geo Mashup plugin, enable and geotag your posts.
2. Get a PHP plugin that lets you execute PHP in posts and enable it. (You could of course, write your own custom template and put the PHP straight in, but as I said, this is a quick fix).
3. Go to Pages > Add New and add a new page. All you need on it is:
[geo_mashup_nearby_list near_lat="<?php echo ($_GET["near_lat"]); ?>" near_lng="<?php echo ($_GET["near_lng"]); ?>" limit=10]
4. Name the page whatever you like and save it. It won’t work yet. Copy down the URL.
5. Go to Appearance > Widgets. Add a Text widget to your menu wherever you want the “Find Posts Near Me” button to appear.
6. Give it a snappy title like “Nearby”, then in the text box add this code:
<script src="http://www.YOURWEBSITE.com/wp-includes/js/jquery/jquery.js"></script>
<script type="text/javascript">
jQuery(window).ready(function(){
jQuery("#btnInit").click(initiate_geolocation);
});
function initiate_geolocation() {
navigator.geolocation.getCurrentPosition(handle_geolocation_query,handle_errors);
}
function handle_errors(error)
{
switch(error.code)
{
case error.PERMISSION_DENIED: alert("user did not share geolocation data");
break;
case error.POSITION_UNAVAILABLE: alert("could not detect current position");
break;
case error.TIMEOUT: alert("retrieving position timed out");
break;
default: alert("unknown error");
break;
}
}
function handle_geolocation_query(position){window.location ="http://www.YOURWEBSITE.com/LOCATIONPAGE/?near_lat=" + position.coords.latitude + "&near_lng=" + position.coords.longitude;
}
</script>
</head>
<body>
<div>
<button id="btnInit" >Find my location</button>
</div>
Replacing “www.YOURWEBSITE.com” with your URL and http://www.YOURWEBSITE.com/LOCATIONPAGE/ with the location page you made in step 3.
7. Press “Save” to publish the widget.
8. Enjoy! In theory, if anyone has a browser that runs HTML5 (pretty much every modern browser) when the button is pressed it will read the user’s location, ask for permission to use it, and then send that to the map page, listing the posts nearby in order of distance (as the crow flies). This doesn’t store the location anywhere.
Feel free to use/improve this code. If I was a better coder, I’d build it into a plugin. Don’t contact me for any suggestions to add to this. I have no idea what I’m doing.