Ideas on laying a Google-like map in ASP.NET

Hello all,

this is a very big question, I know :).
My primary concern for now is just the layout design of Google, I am not digging into the whole software architecture thing behind Google map yet.

My question is: if you have to build an application similar to Google Map in ASP.NET, how would you decide on the layout of the GUI?

What I am thinking is:

We can use a frameset with 3 frames, top frame for the From and To, left frame for displaying the route in text, and the remaining frame is to display the map

But, I am not so sure how easy to pass around parameters among frames in .NET yet, so I don't know if using frameset is a good idea? For example, when user clicks on a selected path in the left frame, the map on the right frame highlight that path. Would that be easy to do with frames or something else?

Please suggest your GUI layout for Google Map. What do you think of using frameset like above? What else do you think that could be easier to use in ASP.NET (using <div>?????? I dont know just guessing).

I will try to divide the points fairly to the most detailed, appropriate answers. Please be acknowledged that this question is more like an open ending question, and the purpose is mostly for my general design knowledge, not for a specific problem; so assigning is very subjective.

Hope someone finds this question interesting.
dttaiAsked:
Who is Participating?
 
Daniel ReynoldsSoftware Applications Developer / IntegratorCommented:
Define the style of the grid in the <head> section....
      <style type="text/css">
      
      #divGrid { BORDER-RIGHT: black 1px solid; PADDING-RIGHT: 0px; BORDER-TOP: black 1px solid; PADDING-LEFT: 0px; BACKGROUND: #e0e0e0; PADDING-BOTTOM: 0px; OVERFLOW: auto; BORDER-LEFT: black 1px solid; WIDTH: 100%; BOTTOM: 100px; PADDING-TOP: 0px; BORDER-BOTTOM: black 1px solid; HEIGHT: 350px; layer-background-color: #E0E0E0 }
      #divGrid P { MARGIN: 0px; COLOR: #ffffff }
      #divGrid A:hover { WIDTH: 100%; HEIGHT: 100%;text-decoration: none; }
      #divGrid A { WIDTH: 100%; HEIGHT: 100%;text-decoration: none; }
      </style>


---in the body of your page define the grid you are putting content in.
---note, you can have several grids absolutely positioned, just play with the style above
---for positioning and size.
---The overflow:auto provides a scrolling window if content exceeds the width specified for the div

                <div id="divGrid" >
                    <!-- content goes here -->
                </div>
0
 
Daniel ReynoldsSoftware Applications Developer / IntegratorCommented:
I have had good success using <div>'s and positioning them appropriately.

Using <divs> with absolute positioning gets rid of your problem of passing variables around to different pages. You would want to design for a specific page size to set up the div sizes just right. Or if you are good, you could determine the display size and have several optimum div sizes.


0
 
dttaiAuthor Commented:
thanks xDJR
A friend of mine suggest using popup windows lol. I think it is a bad idea.
First, there are still the problem with passing parameters aroudn from page to page.
Second, it is not as friendly as the Google design

Woud that be possible for you to share with me your project which uses <div>. Or do you have any favorite reference on the Web while working on that project. I would like to see the thing in action, you know what I mean :)

thanks again
0
 
Daniel ReynoldsSoftware Applications Developer / IntegratorCommented:
Again, there are many ways to skin a cat, but this might be one you can make some use of.
0
 
Daniel ReynoldsSoftware Applications Developer / IntegratorCommented:
I am still interested in the disposition of this question. Dan
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.