Tumblr : Geotag your posts with Google Maps

December 1st 2017

Tumblr : Geotag your posts with Google Maps

Do you travel often ? Do you like to share information about the places where you go ? If so, then this article may be helpful. I'm going to show you how you can display a Google map along with your blog posts in order to share your geographical location.

When writing my article about potential features for a Tumblr premium subscription, I mentionned richer posts and specifically the current lack of geo-location data in photo EXIF data. Few months ago I found a way to circumvent this. This is based on the work of simbabque.

Who is this for ?

Originally the idea was to be able to share one or more photos on Tumblr while displaying a map extracted from Google in order to show precisely where those shots have been taken. I find it interesting in summer time when discovering lakes around my city or when travelling abroad. If you happen to travel from time to time, if you are constantly on the move, if you are a reporter and if you like sharing photos, or, for that matter, any other kinds of medias. Then this is for you.

For a demo, I have implemented this in a free them that I published in the official Tumblr directory. It's called ArtFolio. Here is an example of a photo post, here is an example of a photoset post. Feel free to download it and hack the code.

How does it work ?

Basically, once implemented the concept is quite simple. For any post that you publish, simply add a specific tag in the form of map: name-of-the-place-city-country. And that's all !

The words following map: will generate a query on the Google Map server and return the result in a small map embedded on your Tumblr permalink. Note that there is no space between the word map and the colon (:) but there is one before your keywords. Also your keywords should be separated with hyphens (-), that is, without any space in between. Also the more precise, the better. That's why it's always good to mention the name of the city and of the country to avoid potential duplicates and have the wrong map showing up (yup, there's Paris in Texas...)

Create a Google Maps API Key

Log in your Google account and go to the API Console. From the top drop-down menu choose to create a new project, give it a name

  • From the Google Console API Gallery click on Google Maps JavaScript API and then click on Enable
  • Again from the Google Console API Gallery, in the Google Maps section, click on "More" and select Google Maps Geocoding API and then Enable it
  • In the left sidebar, choose Credentials and select API key. Click on Restrict Key
  • Restrict this key to your Tumblr URL

Implement geo-tagging in your blog

1 - Add a geo-tagging option in your theme options

Go to www.tumblr.com/customize/YOUR-BLOG and choose to customize the HTML code of your theme. In between the two <head></head> tags, place the following lines:

<meta name="if:Enable Geotag" content="0" />
<meta name="text:Google Maps Key" content=""/>

Now if you save and close the HTML editor to view the theme options, two new fields have appeared. 1)- You can activate or desactivate the geo-tagging feature. 2)- Most importantly, you have a new field where you should paste your newly created Google Maps API key.

2 - Add the first script in the head section

Still in between those two <head></head> tags, copy and paste this code . Note that if you only want to show a map on the permalink pages but not on your homepage, then you can restrict the execution of that script to permalink pages only using the {PermalinkPage} tag just after {block:IfEnableGeotag} and {/PermalinkPage} just before {/block:IfEnableGeotag}

3 - Add the map section in your Tumblr code

Now we want to put the map ! Decide where you want that map to appear along with each post. Make use of this code. As an example, on Artfolio, I only use it for photo and photoset posts, on the permalink page, and I place it at the bottom. So in my case I placed it before the closing {/Block:Photo} tag.

Now of course you can customize this the way your want in the stylesheet.

4 - Add the tag script in your Tumblr code

Then we want to place the script that will look for a tag like map: name-of-the-place-city-country and which will send that information to the Google servers to retrieve the map.

Before the closing {/Block:Posts} tag, copy and paste this script

Customize the map

You can customize the map in two ways.

Default map location

If your geotagging option is activated but you did not enter a specific tag like map: name-of-the-place-city-country, then the embedded map will return a default location. For instance, this could be your current city. In order to set this up, look back at the first script that you inserted, on line 11, you'll find some geo coordinates : 45.764, 4.835. To modify those, use the service LatLong.

Map zoom level

On line 12 of that first script, you can read Zoom: 15. This is the default zoom level for all the map you wil generate on your blog. You can enter a value between 0 (maximum zoom out) and 18 (maximum zoom in). But people will be able to zoom in and out themselves manually as well.

Last words

You are done! This method makes it easy to auto fetch a map from a specific tag. Of course it works both on the Web and on mobile, so whenever your shoot a photo from your smartphone, your posts will immediately be spiced up by that map.

If for some reasons you have trouble :

  • Make sure you properly entered your Google Maps API Key in your theme options.
  • Try activating and/or desactivating the geotag option. For some reasons, Tumblr sometimes mixes up on and off.
  • Make sure the key you generated is set to your Tumblr subdomain (or custom personal domain if you have one).

In its free version, the usage of the Google Maps API is 25 000 requests per day. It means that your Tumblr weblog can not generate a total of more than 25 000 maps every day. It's probably more than enough if you have a personal blog. But this is also the reason why your should be restricting your key to your own website so that no else uses it.