This is a post only code monkeys might enjoy. People tend to forget I was one. And so do I on occasion.

What started out as a simple update to a WordPress plugin turned into me learning a lot about geotagging, geocodding, and some updating of my programming skills. And a completely new WordPress plugin!

Because I do things the challenging way.

If you use the WordPress mobile app, you might have noticed it offers the ability to record the location where you created each post from using your GPS coordinates.

I love the ability to tag where I’m creating a post. To me it is another level of adding to this online diary I have here. It let’s me know where I was when I did something. Or didn’t do something, as the case usually is. If you visit my posts, you’ll see something similar to this on posts that have that location information available:

Well isn’t that nifty? And if you mouse-over it—not the image here, but the actual link above the post itself—it will display a map with the location on it that you can interact with. Double nifty!

There is a “companion” plugin of sorts (Geolocation plugin) that does the same thing from the web editor. However, that plugin has not been updated since July 5, 2011. I’m assuming the authors have abandoned it. Which makes me sad.

When you have the Geolocation plugin installed and active, it creates a panel in the post editor that looks like this:

One of the biggest annoyances to me is that you have to manually enter your address or latitude/longitude coordinates for each post, else it defaults to nothing. Annoyyyyy-ing!

I started reading the Geolocation plugin support forum with others people’s requests for changes to this plugin, and some of them were changes I wanted, and some I had never thought of.

Hmm… why not try to update it myself then?

Oy!

Friday and Saturday night/morning I was consumed. I went to bed around 4 AM Saturday morning, and at almost 6AM Sunday morning. After having worked my 10+ hours shifts both days at the studio. I got lost in what I was doing.

I guess buried inside of me somewhere still is a little code monkey.

The first thing I wanted to do was auto-populate that “where I wrote this post at” map. But how the heck to do that?

Sure, I could have just modified the plugin code and hardcoded my latitude and longitude in it. But a) I don’t always blog from home; and b) where’s the challenge in that?

Oddly enough, I chanced upon an article about HTML5 and geolocation. It’s built in! But how to get that to work in this plugin? I lifted the code in that article and gave it a whirl. Or three.

While I haven’t been able to get it to populate on page load (which is probably okay thinking about it since I really only want to cause that interaction one time), I did manage to at least add a button that will trigger the HTML5 geolocation API and populate the field as I need it. Then all I have to do is hit the existing Load button to populate that information in the post. Not pretty, but it works for me.

I had planned on stopping there, but then I stumbled upon a request to push that map location information into the html head as meta data. There’s a push by some to get GeoURLs out there. I’m game, as I like the idea of finding websites by their proximity to a given location. That, and it sounds like a simple thing to do.

Au contraire! That has proved to be an interesting challenge.

I hit upon the idea to use the Google Geocoding API to do a reverse lookup based on the latitude and longitude (since we have that information), process the JSON returned from Google, and plug that information into the html head meta for the post as it loads.

Surprise! Google apparently collects a lot of data about locations. A LOT!

For example, here’s the data returned by Google for my studio’s address:

{
   "results" : [
      {
         "address_components" : [
            {
               "long_name" : "2210",
               "short_name" : "2210",
               "types" : [ "street_number" ]
            },
            {
               "long_name" : "South Walton Boulevard",
               "short_name" : "S Walton Blvd",
               "types" : [ "route" ]
            },
            {
               "long_name" : "Bentonville",
               "short_name" : "Bentonville",
               "types" : [ "locality", "political" ]
            },
            {
               "long_name" : "9",
               "short_name" : "9",
               "types" : [ "administrative_area_level_3", "political" ]
            },
            {
               "long_name" : "Benton",
               "short_name" : "Benton",
               "types" : [ "administrative_area_level_2", "political" ]
            },
            {
               "long_name" : "Arkansas",
               "short_name" : "AR",
               "types" : [ "administrative_area_level_1", "political" ]
            },
            {
               "long_name" : "United States",
               "short_name" : "US",
               "types" : [ "country", "political" ]
            },
            {
               "long_name" : "72712",
               "short_name" : "72712",
               "types" : [ "postal_code" ]
            }
         ],
         "formatted_address" : "2210 South Walton Boulevard, Bentonville, AR 72712, USA",
         "geometry" : {
            "location" : {
               "lat" : 36.3481840,
               "lng" : -94.2114670
            },
            "location_type" : "ROOFTOP",
            "viewport" : {
               "northeast" : {
                  "lat" : 36.34953298029150,
                  "lng" : -94.21011801970850
               },
               "southwest" : {
                  "lat" : 36.34683501970850,
                  "lng" : -94.21281598029151
               }
            }
         },
         "types" : [ "street_address" ]
      },
...

And that’s just the first section of the JSON result. It keeps going and going and going. All for one place! (If you want to see the full return, here’s the source.)

How do I get what I want out of that?

If you love spaghetti code, then you’ll love what I did. 😉

More to come on this in another post. As well as the plugin if anyone else is interested in it.

Actually, I could probably use another set of eyes if someone wants to volunteer…