My therapist wife Mimi is literally my exact opposite on the Myers-Briggs personality type test. I think one of the reasons she’s so good at what she does is that she’s very grounded – results-oriented with a pragmatic assessment and prioritization of things needing immediate attention. She completely understands my late nights working towards a critical deadline. But she’s amazed (not in a flattering way) when I stay up late “playing” with software… like tonight.

I set out post a rudimentary web site with Mimi’s basic information. I did that, but then got lost in experimenting with Windows Live Local Beta for Mimi's office location page. How do you style a Windows Live map control? How do you create custom pushpins? In the absence of bird’s-eye coverage, wouldn’t it be nice to have a street level view of Mimi’s office? etc... So now, an otherwise mundane web site design has a fun map control that, for IE browsers at least, lets you pan, zoom, and hover on pushpins for street level photos - all in-place on the page:

Mimi's Office

Since this is a simple common scenario, I'm pasting the code I assembled from the various programming resources on the Web for Windows Live Local:

<link href="http://dev.virtualearth.net/standard/v2/MapControl.css" type="text/css" rel="stylesheet" />
<script type="text/javascript" src="http://dev.virtualearth.net/standard/v2/MapControl.js"></script>
<script type="text/javascript" src="http://local.live.com/JS/VE.js"></script>
<link href="VEPanel.css" type="text/css" media="screen" rel="stylesheet" />
<script type="text/javascript">
var map = null;
var tMimi = "Mimi's Office";
var bMimi = "205 East 3rd Ave,San Mateo, CA<br><img src='officebuildingstreetPointer.jpg'>";
var tParking = "Parking Garage";
var bParking = "on Ellsworth between 3rd and 4th";
var p;

function MyOnLoad()
{
var params = new Object();
params.latitude = 37.564999;
params.longitude = -122.323074;
params.zoomlevel = 17;
params.mapstyle = 'h';
params.showScaleBar = false;
params.showDashboard = true;
params.dashboardSize = "small";
params.dashboardX = 3;
params.dashboardY = 3;
map = new Msn.VE.MapControl(document.getElementById ("map"), params);
map.Init();
map.AddPushpin(1, 37.565148, -122.323043, 20, 20, null, "<DIV onclick='HidePopup()' onmouseover='DisplayPopup(event.clientX, event.clientY, 260, 220, tMimi, bMimi)'><img src='mimiFramedSmall.jpg' width='20'></DIV>", 2);
map.AddPushpin(2, 37.564621, -122.322625, 20, 20, null, "<DIV onclick='HidePopup()' onmouseover='DisplayPopup(event.clientX, event.clientY, 180, 100, tParking, bParking)'><img src='parkingicon.jpg' width='20'></DIV>", 2);

}

function GetToolbar()
{
var html = "<table cellpadding=\"0\" cellspacing=\"0\" ";
html += "border=\"0\" align=\"left\">";
html += "<tr><td valign=\"top\" align=\"center\">";
html += "View Live: <a href='http://local.live.com/default.aspx? v=2&cp=37.565148~-122.323043&style=r&lvl=15&sp=aN.37.564666_-122.322596_Parking%20Garage_on% 20Ellsworth%20between%203rd%20and%204th~aN.37.565148_-122.323043_Mimi%27s%20Office_Medical%20Arts%20Building%0d% 0a205%20East%203rd%20Ave%0d%0aSan%20Mateo%2c%20CA'>Road</a> or <a href='http://local.live.com/default.aspx?v=2&cp=37.565144~- 122.323043&style=h&lvl=18&sp=aN.37.564666_-122.322596_Parking%20Garage_on%20Ellsworth%20between%203rd% 20and%204th~aN.37.565148_-122.323043_Mimi%27s%20Office_Medical%20Arts%20Building%0d%0a205%20East%203rd%20Ave%0d% 0aSan%20Mateo%2c%20CA'>Aerial</a>"
html += "</td></tr><tr><td> </td></tr></table>";
return html;
}

function DisplayPopup(x,y,w,h,title, body)
{
HidePopup();
IOSec = new OutputEncoder();

p = new VE_Panel("MyPanel",x+3,y,
w,h,
"blue",
31,
title,
body,
"",
"Mouse Over!",true);
p.SetToolbar(GetToolbar());
p.SetFooter("Get directions <a href='http://local.live.com/default.aspx? v=2&cp=37.565144~-122.323043&style=h&lvl=18&sp=aN.37.564666_-122.322596_Parking%20Garage_on% 20Ellsworth%20between%203rd%20and%204th~aN.37.565148_-122.323043_Mimi%27s%20Office_Medical%20Arts%20Building%0d% 0a205%20East%203rd%20Ave%0d%0aSan%20Mateo%2c%20CA'>to here</a>");
p.onCloseClick = function(e) { p.Hide(); };
}

function HidePopup()
{
if (p != null)
{
p.Destroy();
p = null;
}
}
</script>

Also, thanks to Omar for his recommendation of Server Intellect for ASP.NET 2.0 and SQL Server 2005 web hosting.