I'm on page 132 (print edition) of the book, and my Virtual Earth map does not display correctly. A Beige box ends up below the Create.aspx form, the VE logo sticks to the left lower browser corner, the scale bar to the lower right browser corner, and the map itself is stuck to the upper left corner of the browser.

I even tried to copy and past the code directly from the code download, and it still does the same thing.

I've tried numerous things, including substituting jQuery 1.2.6, since that is what is used in the code download, but no luck. When I run the code download, it works fine, of course. So, I have no idea what is going on. Anyone else have trouble displaying the Virtual Earth map?

Hi adimauro,

This happened to me too. The reason it looks like this is the Site.css that gets created by when you start MVC project was never edited in the chapter.

What I did to fix this was to download the source code available online and add the missing lines from the given source code into my Site.css

Hope this helps

I am having this same problem. I added the css to make the dinner div float left and the vemap float right. The boxes are in the correct places, but the VE map hovers over everything in the left corner. Did anyone resolve the problem?

As jonv mentioned, downloading the source code from the book's website and copying over Site.css got the map working for me.

Thing to note is that the <div> tag which you assign your VEMap to should have position:relative style otherwise your VE tiles (which have position:absolute) will try to position themselves relative to the page.


Hope this helps.

S.

Thank you very much that resolved the problem.

Hello,
I copied the site.css from the downloaded solution (which works fine) to my content folder. The problem still exists. Any ideas? When overwriting the original didn't work I tried cutting and pasting from the download to the original. Still no good. I really,. really don't want to have to do a file by file compare with the download version but I'm stumped.

Did you double check that there is a css property for the div tag that you have on your page where the VE map is supposed to sit? Make sure the position is set to relative as pointed out above. That solved my problem. I thought I was setting all of the css properties but that one wasn't in the download.

Hi zondre. First of all, thank you for your prompt response. I thought I'd have to wait until tomorrow.

Maybe I'm misunderstanding your suggestion. The div tag I believe I'm mapping to is in Map.ascx: <div id="theMap"></div>

the Site.css property for this is:

#theMap {
position: relative;
width: 500px;
height: 450px;
}

Is this correct or is it this one?
<divid="mapDiv">
<% Html.RenderPartial("Map", Model.Dinner); %>
</div>

Site property:
#mapDiv {
float: left;
}

theMap is the one that I had to set. It seems that you might have a different issue than I did. Sorry.

Hi taddendum,
Could it be that you need a small space in between your div and id?

From what you have posted, your div tag looks like , but it should be .

Also, can you post the contents of your Map.ascx?

Good luck!

S.