When I'm trying to build a page that uses the Virtual Earth map control, I quite often want to position the map at a specific geographical location, or place a pin at specific points.  I've shown in the past how you can do this using postcode lookup, but in general I don't want my app to be doing a postcode lookup if I know the location in advance.  What I need is to determine the latitude and longitude of the points I'm interested in, and put those into my app.  I've done this a few times with a quick-and-dirty solution, but I thought it was about time to build a page I can keep coming back to for finding lat/long values.

At the same time, I thought I should take the opportunity to refresh my CSS skills, which are patchy at best, and see how easily I can layout a page, including the VE map control, using only CSS.  You can see the results here.

Along the way, I found an interesting feature of the VE map control, which I thought I should share.  As you'll know if you've done anything with the map control yourself, you create a <DIV> and point the map control at it.  The map gets rendered inside your <DIV>, so you control the positioning, size and shape of the map by styling the <DIV>.  I was using a CSS file for this, with an entry like this...

    #mapPanel {
        height:100%;
    }

...in order to fill the region used by a parent <DIV>.  But the map kept on rendering at its default 600x400 pixels.  It took me quite some time before I finally got desperate and tried the CSS class approach (changed the entry in my CSS file to .mapPanel and put a class= attribute on the <DIV>).  Miraculously to me, this worked just fine.

I don't want to suggest this is a bug in the map control.  As I said, I'm no CSS expert so there may be a very good reason why I saw this behaviour.  Anyway, I hope this post can prevent others wasting as much time as I did on this.  And of course, you know where to come to find lat/long values.