Monday, August 15, 2016
Auto add a map to Blogger posts
Auto add a map to Blogger posts
Heres an incredibly easy way to automatically add a fully functional small embedded Google Map to any of your Blogger blog posts.
Add this code to your template once, and automatically any blog post that you geotag will have a small embedded map featuring that location. Since its a template edit, it will work automatically for any post you geotagged, past or present. This is really pretty amazing, as I know a lot of people, from travelers to businesses have wanted to do this.
Heres an example of what it looks like. All I did was geotag that post at Gangnam station, and a convenient map automatically is displayed. Please ignore the fruity theme there, I was testing new templates.
Just add the following code to your Blogger template. Wherever you add it, thats where the map will appear in the post. In the screenshot above, I edited the size to make it a bit smaller and I added the code just below the sharing buttons, but of course you could add it just below the <post-footer>, near the timestamp, inside the post itself, whatever. Id suggest only adding it to the desktop part of the template. If your location stamp isnt showing up as a text link in your blogs mobile version, see how to enable it in my other post: [Displaying your Blogger posts location tag on mobile templates]
Add this code to your template once, and automatically any blog post that you geotag will have a small embedded map featuring that location. Since its a template edit, it will work automatically for any post you geotagged, past or present. This is really pretty amazing, as I know a lot of people, from travelers to businesses have wanted to do this.
Example map auto-embedded in a Blogger post
Heres an example of what it looks like. All I did was geotag that post at Gangnam station, and a convenient map automatically is displayed. Please ignore the fruity theme there, I was testing new templates.
 |
| Automatically embedded post map, based on posts geotag |
Just add the following code to your Blogger template. Wherever you add it, thats where the map will appear in the post. In the screenshot above, I edited the size to make it a bit smaller and I added the code just below the sharing buttons, but of course you could add it just below the <post-footer>, near the timestamp, inside the post itself, whatever. Id suggest only adding it to the desktop part of the template. If your location stamp isnt showing up as a text link in your blogs mobile version, see how to enable it in my other post: [Displaying your Blogger posts location tag on mobile templates]
Code to add to your Blogger template
<b:if cond=data:top.showLocation>Full credit for this goes to the tip site Blogger4Bloggers, which seriously is a treasure trove of neat tips like this. If you use Blogger definitely check them out and subscribe. They have some amazing stuff there.
<b:if cond=data:post.location>
<div class=post-location>
<iframe expr_src=data:post.location.mapsUrl + "&amp;ie=UTF8&amp;hnear=" + data:post.location.name + "&amp;hq=&amp;t=h&amp;output=embed" frameborder=0 height=350 marginheight=0 marginwidth=0 scrolling=no width=425/><br/>
<small style=color: #0000FF;>
<span><b><data:postLocationLabel/></b> <span class=notranslate><data:post.location.name/></span></span><br/>
<span><a expr_href=data:post.location.mapsUrl style=color: #0000FF; target=_blank>GoogleMaps</a> |
<a expr_href="https://plus.google.com/u/0/local/" + data:post.location.name style=color: #0000FF; target=_blank>GooglePlus Local</a></span>
</small>
</div>
</b:if>
</b:if>
[Source: Add Google Maps automatically to blogger posts]
Geotagging your posts
Just a reminder that to make the map appear, you need to geotag your blog post using the "Location" setting in the sidebar of the post editor. The Blogger mobile app should also do this, though for some reason mine has started giving a "Location not available". Not sure if thats a Blogger issue or just me. Anyway it works great from the desktop editor.
Case studies for using this
I can imagine a few situations where this would be very convenient.
- Small business that does installations in a local area, and writes up a blog post for each to feature the work. This would save them having to manually embed maps to the locations, which would be a pain in the ass.
- A tourist or travel writer keeping a travel blog, to easily show where he was at each stop of his tour.
- An amateur food critic can easily show the locations of restaurants hes dined at.
- A hiking club could add blog posts for specific trips, posting photos and details of the destination, and automatically have a map of the destination embedded.
Im sure there are lots more cases where this would be convenient. Like I said it beats the hell out of doing this manually, which I know some people do.
Other Map types
If youre into this, Ive got a couple of other map posts, including how to display a large map that shows the locations of all your geotagged blog posts, and the same but in a sidebar widget.
And all my map-related posts are here.
Thanks for reading, and happy mapping.
