- login into http://draft.blogger.com
- click the add location link below the main text field. You can use editor to search, drap ect.
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 |
data:post.location.name | 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'>
<data:postLocationLabel/>
<a expr:href='data:post.location.mapsUrl' target='_blank'><data:post.location.name/></a>
</b:if>
</b:if>
</span>
</div>
Now, you have done in post footer to add google map url link.
http://bloggerindraft.blogspot.com announce another Gedget(http://blogmap-gadget.googlecode.com/svn/trunk/blogmap.xml) 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'>
<data:postLocationLabel/>
</div>
<div id='post-geo'>
<script src='http://cage.chung.googlepages.com/Geotagging1.0.js' type='text/javascript'/>
<script type='text/javascript'>
var mapurl = '<data:post.location.mapsUrl/>';
var size = "450x220";
var maptype = "roadmap"; // roadmap(Default),mobile,satellite,terrain,hybrid
var markerColor = "green"; //black, brown, green, purple, yellow, blue, gray, orange, red, white
var markerChar = 'm' //[a-z, 0-9]
var Key = MAPS_API_KEY;
var sensor = false;
BuildStaticMap(mapurl, size, maptype, markerColor, markerChar, Key, sensor);
</script>
</div>
</b:if>
</b:if>
</p>
This way is right to work. but, i don't know how to get the geo point data directly. now ,i must parse the
Thanks you talk me about that. I'll try it. ^^
ReplyDeleteExcellent Blog. Thank you so much for sharing.
ReplyDeletepython training in bangalore | python online training
aws online training in bangalore | aws online training
artificial intelligence training in bangalore | artificial intelligence online training
machine learning training in bangalore | machine learning online training
data science training in bangalore | data science online training