Thursday, July 13, 2006

Geolinks: google maps in blogs made easy

(from my google-maps department)

I use quikmaps to blog maps. It is great. But recently I was wondering how to embed a map simply writing a tag in my posts. Something like <geolink></geolink>. Then I realized that I can. The rationale is to insert in the HTML a tag with geo coordinates and zoom level. See the text below. The links are not "simple" links they are somehow geolinks.

Click the green links!


I went to Italy where I visited the beautiful city of Rome. Then I took a plane to reach the town of Cagliari where I spen most of my time in the Poetto beach.



It is nice. Isn't it?





Now let's see how it works. Insert in your blogger template the followings:


<!-- geolink style -->
<style type="text/css">
span.geolink{
color: green;
text-decoration: underline;
cursor:pointer
}
</style>
<!-- geolink style END-->


and also


<!--geolink code-->
<script type="text/javascript" src="http://opensource.crs4.it/geolink/mappe.js"></script>
<!--geolink code END-->



Now it is time to write your post. In the html you can write your text and then insert a sentence like:


...I went to <span class="geolink" onclick="center(this);" lat="42" lon="12.5" zoom="9">Rome</span>


As you see the *span* element contains some extra attributes like:


  • lat
  • lon
  • zoom

Now don't forget to place in your blog post also the iframe tag which will display the map.


<iframe name="map" style="width: 550px; height: 350px;" src=""></iframe>


That's all. Too simplistic? It works, at least for me.
Bye.

The image “http://digg.com/img/little-digg.gif” cannot be displayed, because it contains errors.

1 comment:

Anonymous said...

Well done, Davide! Geolinks are a good idea and your implementation is easy to understand (for me too!) and use. :-)