GeoTag Blogger Blog with Google Map API and JSON feed
here we go:
1.
Get a Blogger account
2.
Make a new post. Fill in title & description. Tag it geo:lat=XX.XXX, geo:long=XX.XXX
Blogger can handle embedded images, video & audio players. The marker will show these when you click the map. Check out divshare and eyespot for media hosting.
3.
Get a Google map api key.
"My web site URL" is your Blogger account url (eg http://straddieplastic.blogspot.com) where the map will be hosted
Copy the long random letter/number key
4.
Back to Blogger. Go to the Dashboard and edit your template (Manage Layout).
Click the Edit HTML tab link.
5.
Copy the following block of code to a text editor.
<!-- :: :: :: :: MAP - copy from here :: :: :: :: :: -->
<!-- CHANGE HERE -->
<script src="http://maps.google.com/maps?file=api&v=2&key=GOOGLE-API-KEY" type="text/javascript"></script>
<script type='text/javascript'>//<![CDATA[
/* * CHANGE HERE * */
var blogurl = 'BLOG-URL';
//debug
Stamp = new Date();
var h = Stamp.getHours();
var m = Stamp.getMinutes();
var s = Stamp.getSeconds();
var entries = h+":"+m+":"+s+"\n";
// set up vars so map is global
var cm_map;
var cm_Polyline = [];
// load map
function cm_load() {
if (GBrowserIsCompatible()) {
// create the map
cm_map = new GMap2(document.getElementById("cm_map"));
cm_map.addControl(new GLargeMapControl());
cm_map.setCenter(new GLatLng(0,180),5);
cm_getJSON();
} else {
alert("Sorry, the Google Maps API is not compatible with this browser");
}
}
// parse JSON feed
function cm_loadMapJSON(json) {
// go
var bounds = new GLatLngBounds();
for (var i = 0; i < json.feed.entry.length; i++) {
var entry = json.feed.entry[i];
var url = entry.link[0].href;
var label = entry.title.$t;
var lat=0;
var lng=0;
//debug
entries += "\n::: entry "+ i +" "+ label +" "+ lat +"-"+ lng + "\n";
if (entry.category) { // if there are tags/terms..
var latStr = "geo:lat=";
var lngStr = "geo:long=";
// interpret tag from blogger
for (var j=0;j<entry.category.length;j++) {
term = entry.category[j].term;
// if the term includes geo:lat or geo:long then interpret point data
// and multiply by 1 to change to num
if (term.match(latStr)) lat = term.replace(latStr,'')*1;
if (term.match(lngStr)) lng = term.replace(lngStr,'')*1;
//debug
entries += term + " ";
}
// if there is point data then build marker etc
if (lat && lng) {
// create an extract of content for long posts
content = entry.content.$t;
if (content.length >= 800) {
a = content.substring(0, 200);
a += ' <small><a href="'+url+"\">more..</a></small>";
content = a;
}
var html = '<a href="'+url+'">'+entry.title.$t+'</a><br />'+content;
// make google geo point
var point = new GLatLng(lat,lng);
// draw marker
var marker = cm_createMarker(point,label,html);
cm_map.addOverlay(marker);
// assemble array of points for polyline
cm_Polyline.push(point);
bounds.extend(point);
//debug
entries += lat +"-"+ lng;
} else {
//debug
entries += "* no geo terms \n";
}
//debug
entries += "\n";
if (document.getElementById("debug")) {
debug = document.getElementById("debug");
debug.value = entries;
}
}
}
// reset map according to post markers
cm_map.setZoom(cm_map.getBoundsZoomLevel(bounds)); // zoom map to markers
cm_map.setCenter(bounds.getCenter()); // center map to markers
// draw polyline
var polyline = new GPolyline(cm_Polyline, "#FF0000", 4);
cm_map.addOverlay(polyline);
// show clicked lat/long (borrowed from http://mapki.com/getLonLat.php)
GEvent.addListener(cm_map, "click", function(overlay, point){
if (point) {
// map.clearOverlays();
// cm_map.addOverlay(new GMarker(point));
cm_map.panTo(point);
// feedback
showclickedlocation = document.getElementById("showclickedlocation");
showclickedlocation.value = "geo:lat="+point.lat()+", geo:long="+point.lng();
}
});
}
// create marker
function cm_createMarker(point,title,html) {
var markerOpts = {};
markerOpts.title = title;
var marker = new GMarker(point, markerOpts);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
// write script to load JSON
function cm_getJSON() {
var script = document.createElement('script');
script.setAttribute('src', 'http://'+blogurl+'/feeds/posts/default'+'?alt=json-in-script&callback=cm_loadMapJSON');
script.setAttribute('id', 'jsonScript');
script.setAttribute('type', 'text/javascript');
document.documentElement.firstChild.appendChild(script);
entries += script.src+"\n";
}
//]]>
</script>
<!-- :: :: :: :: MAP - copy to here :: :: :: :: -->
6.
Change the two settings GOOGLE-API-KEY and BLOG-URL.
Replace GOOGLE-API-KEY with the long letter/number key;
Replace BLOG-URL with the blog url (eg straddieplastic.blogspot.com )
Copy the changed code.
Go back to the Blogger template. Scroll down through the code until you find </head>
Paste the script in front of the </head> tag
7.
Again in the template, replace <body> with <body onload="cm_load()">
8.
Add the following map code to the template where you want the map to show : <p id="description"><$BlogDescription$></p> :
<!-- Begin map -->
<div id='google-blogger-map'>
<div id='cm_map' style='width:400px; height:300px'></div>
<div><input type="text" style="background:black; color:grey; border:0px; font-size:0.8em; width:400px" id="showclickedlocation" value="location" /></div>
</div>
<!-- end map -->
9.
Save the template and check the blog. !!
10.
Options :
This can be done with a blog published to an ftp server.
In the cm_getJSON function, replace
http://'+blogurl+'/feeds/posts/default
with
http://www.blogger.com/feeds/BLOG-ID/posts/default
..and change BLOG-ID to the ID of your blog. To get the id of your blog, go to your Dashboard, click on Settings, then copy the ID from the URL.
Seems the blog needs to be Public for this to work.. (Settings->Basic->Add your Blog to our listings? = Yes)
(this FTP publishing suggestion from phydeaux3 )
