When I run in firefox, the map is top left, not where it should be, I have
#theMap {
position: relative;
width: 500px;
height: 450px;
}

in my css

Oddly I have the same issue but in IE8. The map displays at the upper left of the screen completely obscuring the web form. When I decided to save the page to compare it to the output of the NerdDinner source provided, opening the saved file results in a visible map below the form.

Seems odd to me that it would fail in debug, but not when the saved render of the debugging page is opened.

OK on the map problem I found a solution to that and it was due to the <fieldset> not being placed

in my details.aspx

<fieldset>
<div id="dinnerDiv">

<h2><%= Html.Encode(Model.Title) %></h2>
<p>
<strong>When:</strong>
<%= Model.EventDate.ToShortDateString() %>

<strong>@</strong>
<%= Model.EventDate.ToShortTimeString() %>
</p>
<p>
<strong>Where:</strong>
<%= Html.Encode(Model.Address) %>,
<%= Html.Encode(Model.Country) %>
</p>
<p>
<strong>Description:</strong>
<%= Html.Encode(Model.Description) %>
</p>
<p>
<strong>Organizer:</strong>
<%= Html.Encode(Model.HostedBy) %>
(<%= Html.Encode(Model.ContactPhone) %>)
</p>

<% Html.RenderPartial("RSVPStatus"); %>
<% Html.RenderPartial("EditAndDeleteLinks"); %>

</div>

<div id="mapDiv">
<% Html.RenderPartial("map"); %>
</div>
</fieldset>