My studying notebook


Blogger in Draft New feature: Geotagging Test II

12/13/2008 12:48:00 PM Posted by Unknown , 2 comments - announce a new feature about goetagging. You can add a location to descirbe your post. The geotags give your reader a way to understand what are you want to say exactly. It's easy to use this new feature.
  1. login into
  2. click the add location link below the main text field. You can use editor to search, drap ect.
This is the simple step and there has more detail explain how to use new feature. When you add location in post. That's mean you can get some geo information in post.

Layouts Data Tags Type Value
data:top.showLocation bool true or false
data:post.location bool true or false
data:post.location.mapsUrl text google map url text display name

There's new four blogger Layouts Data Tags in upon image and list. Then, we can modify our template to add a url of the Google map site links. You can add this url link in one of three of post footer.

<p class='post-footer-line post-footer-line-1'>here</p>
<p class='post-footer-line post-footer-line-2'>here</p>
<p class='post-footer-line post-footer-line-3'>or here</p>

Then, modify template code like that

<div class='post-footer-line post-footer-line-1'>
<span class='post-location'>
<b:if cond='data:top.showLocation'>
<b:if cond='data:post.location'>
<a expr:href='data:post.location.mapsUrl' target='_blank'><></a>

Now, you have done in post footer to add google map url link. announce another Gedget( that will display your posts on a map by javascript parsing blog feed. So, there is a few known issuse descript by Blogger in Draft.

one of upon know issue is the geotag cannot be removed from a post once it has been saved. If you need to remove a geotag, please copy your post content into a new post and delete the geotagged post. I think that everybody will think it isn't very friendly. It's more to suit people who like the travel blogger. i don't use this new feature every time i write new post. Sometime, i will add extra information to help reader to understand the post by use Google Static Maps API. It's a easy way to display what i say.
So, i modify the blogger template again to add a image by Google Static Maps API in post footer.

<p class='post-footer-line post-footer-line-1'>
<b:if cond='data:top.showLocation'>
<b:if cond='data:post.location'>
<div class='post-labels'>
<div id='post-geo'>
<script src='' type='text/javascript'/>
<script type='text/javascript'>
var mapurl = &#39;<data:post.location.mapsUrl/>&#39;;
var size = &quot;450x220&quot;;
var maptype = &quot;roadmap&quot;; // roadmap(Default),mobile,satellite,terrain,hybrid
var markerColor = &quot;green&quot;; //black, brown, green, purple, yellow, blue, gray, orange, red, white
var markerChar = &#39;m&#39; //[a-z, 0-9]
var Key = MAPS_API_KEY;
var sensor = false;

BuildStaticMap(mapurl, size, maptype, markerColor, markerChar, Key, sensor);

This way is right to work. but, i don't know how to get the geo point data directly. now ,i must parse the to get the latitude, longitude and zoom value. When i parse the location map url. The zoom value always equal to 10. In fact, there are few method to solve this problem. I can use Google Maps API instead of Google Statics Maps API. It's making thing more complicate probably.