Monday, July 7, 2008

Map "Widget"

When I tried to include a Google Map into one of my recent blog entries, I did not find a suitable method to just add a placemark and show the map in the blog entry. There was the option to show a map as a static image, provided by Google, but I wanted to keep all the user interaction open (zoom, shift, etc.). So I had no other choice than to write again an HTML page with this functionality.

This page allows to show any set of locations, provided through just the URL. The following is an example how it looks:



This is the code for it:

<iframe width="100%" frameborder="0" src="http://creativetech.inn.leedsmet.ac.uk/_Track/ShowMapPlaces.php?h=400&p=34.8239369,33.6019474,Journalist%20Village,http://www.esk.org.cy/en1.htm&p=34.8210700,33.6035568,Hotel%20Pharos,http://www.faros-village-larnaka.eureka-reservation.com" height="400px" >
</iframe>

Anyone can use this for inclusion in their own blog - no warranty is given here, not for functionality, damage, or sustainability. The above URL may disappear any time, but for now it will remain here - if it would be moved, it will be announced here in this blog.

The method is to embed an IFRAME into any web page, with the usual parameters. The URL is http://creativetech.inn.leedsmet.ac.uk/_Track/ShowMapPlaces.php.

Parameters are:

h= height of the map
w= width of the map; if not given, it will automatically adjust to the width of the IFRAME
p= point
This is given by 4 parameters, separated by commas:
latitude, longitude, headline text, headline URL

Feel free to test it out into your own web site.
Not sure how long the URL can be... but any number of points is ok. In case of 1 point, a zoom factor of 17 is assumed. In case of more points, the bounding box is computed automatically, and the zoom is set so that all points are within the visible map.

Have fun!

No comments: