Virtual Earth 6: Align Mini Map in the Top Right corner of the Map

Dec 27, 2007  • Mapping

If you take a look at maps.live.com you’ll see the Mini Map is in the Top Right corner of the map. Virtual Earth doesn’t have any alignment options built in when showing the Mini Map. It just allows you to position the mini map using x and y offset coordinates relating to the top left corner of the map. This makes it really easy to show the mini map in relation to the top left corner, but what makes this tricky is the dashboard is already there.

Here’s small example I wrote up on how to align the Mini Map in the Top Right corner of the map. This code also hooks into the Maps onresize event so it can move the Mini Map to the desired location when ever the map is resized.

Here’s a screenshot of it in action:

Here’s the code:

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

<script type="text/javascript" src="http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6" mce_src="</script">http://dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6"></script>
**Resize Map:**&nbsp; Bigger&nbsp;&nbsp; Smaller **Change Mini Map Size:**&nbsp; Small&nbsp;&nbsp; Large

This code works in IE, Firefox and Safari 3 on Windows. I haven’t tested any other browsers, but I assume it’ll work in others as well. Another thing to note is that this code will only work if there is only a single Virtual Earth map on the page; it’ll break with multiple maps on the same page.

Sorry, I didn’t have time to write up a nice article surrounding this code. But, I did add a bunch of comments to make it more readable.