timwarr.net

Now I have shifted the hosting of my blog off wordpress.com, I have the luxury of being able to put iFrames and JavaScript in my blog posts and pages.  So I decided it was about time I had a slippy map on my blog and have added one to my sidebar (just look to the right…)

To do this I used the Multimap.com embedded map functionality (which I blogged about earlier).  This time I have hacked the HTML provided to customise the embedded map and make sure it fits neatly on the sidebar.

To start with I went to multimap.com and found the relevant location I wanted for my embedded map (in this case Innsbruck):

I then used the "customize and preview map" link in the "link to this map" dialogue box to customise the map to my needs.  This brings up this page:

This page provides a simple GUI to customise your embedded map.  I chose a custom pixel size of 200 x 400 (i.e. thin and long) so it would fit nicely in my sidebar.  The resulting HTML for my embedded map is provided in the "HTML" text box in the bottom.  In this case I do not have much room on my sidebar so I wanted to remove the extra links at the bottom to different multimap.com maps, Birds Eye and directions.To do this, I need to hack the HTML returned.  So firstly I copied the HTML out of the bottom text box, which gives me this when I paste it into UltraEdit (a great programmers text editor): 

<div id="MMEmbeddedMap" style="padding:8px"><iframe width="200" height="400"
frameborder="0" scrolling="no" marginheight="0" marginwidth="0"
src="http://www.multimap.com/client/embed/?width=200&height=400&lat=47.26525
&lon=11.39771&zoomFactor=13&emid=Q3zd58nstiQM4o37TGjfm9hDXl4MelqK
&mapType=hybrid&moveMap=0,0">
</iframe><div>
<a href="http://www.multimap.com/maps/?lat=47.26525&lon=11.39771
&zoomFactor=13&mapType=hybrid">#]
View Aerial Image of Innsbruck, Tirol (Tyrol), Austria</a> on Multimap.com
<br /><a href="http://www.multimap.com/maps/?lat=47.26525&lon=11.39771
&zoomFactor=13&mapType=oblique">Bird's Eye view of Innsbruck, Tirol (Tyrol),
Austria</a><br />Get directions <a href="http://www.multimap.com/directions/?
lat_2=47.26525&lon_2=11.39771&countryCode_2=AT&displayName_2=Innsbruck, Tirol
(Tyrol)&qs_2=Innsbruck, Tirol (Tyrol)">to</a> or
<a href="http://www.multimap.com/directions/?lat_1=47.26525&lon_1=11.39771
&countryCode_1=AT&displayName_1=Innsbruck, Tirol (Tyrol)&qs_1=Innsbruck,
Tirol (Tyrol)">from</a> Innsbruck, Tirol (Tyrol), Austria
</div></div>

The I edited the HTML in UltraEdit to remove the extra links, change the wording and modify the layout:

<div id="MMEmbeddedMap" style="padding:8px">
<iframe width="200" height="400" frameborder="0" scrolling="no" marginheight="0"
marginwidth="0"
src="http://www.multimap.com/client/embed/?width=200&height=400&lat=47.26525
&lon=11.39771&zoomFactor=13&emid=Q3zd58nstiQM4o37TGjfm9hDXl4MelqK
&mapType=hybrid&moveMap=0,0">
</iframe><div><a href="http://www.multimap.com/maps/?lat=47.26525&lon=11.39771
&zoomFactor=13&mapType=hybrid">Innsbruck</a> on Multimap.com<br />
</div></div>

I use WordPress for my blog, so I have added the embedded map onto my sidebar as a simple text widget.  In this text widget, all I need to do is paste in my edited HTML for the embedded map:

Then I saved the changes and checked the appearance on my sidebar.  You can see the results for yourself….

So I hope I have shown that not only is it really easy to create embedded maps on multimap.com, but you can also easily hack the resulting HTML to suit your specific needs.

Happy hacking and embedding!