Load Map to floating div

[mapusr01]

Hi,

I have an html/jquery menu in  a sidebar and a main content area set up as floating divs in a container div. I use jquery to load the
content area with html from various other files.

I have a html/javscript basic "hello world" google map which works fine if i just load it into a browser but when I try to load it from
my menu into the main content area nothing happens

my menu/content divs are set up

.container { position:absolute, properties... }
.menu { position:relative, properties... }
.status1 { position:relative, properties... }
.status2 { position:relative, properties... }

<div class="container">
 
 <div class="menu">
 ...menu code...
 </div>

 <div class="content">
  <div id="map_canvas" style="position:absolute; width:100%;height:100%"></div>
 </div>

 <div class="status1"></div>
 <div class="status2"></div>

</div>

I loading the map html file like
$("#ldmap").click(function() {
  $("#map_canvas").load('gmap-helloworld.html');
});


gmap-helloworld.html never renders into the div, if I just load it into the browser like file:///gmap-helloworld.html the map
displays as expected. If I load some different html into the div it displays as expected , so I dont know why the map
wont load into the div

Any ideas?

[Rossko]

>  <div class="content">
>   <div id="map_canvas" style="position:absolute;
> width:100%;height:100%"></div>

Map height and width are 100% of 'content', which is unspecified/
indeterminate in what you have shown us.

However ...

> I loading the map html file like
> $("#ldmap").click(function() {
> $("#map_canvas").load('gmap-helloworld.html');

jqeury 'load' is intended to load page fragments, not to try to insert
a complete HTML page inside another page.
http://api.jquery.com/load/
Something that might be going wrong for you is that the map-making
script never gets triggered, as the base page is already loaded before
you execute the jquery stuff.

But it's all guesses, as you haven't followed the posting guidelines
to give a link to your problem page. See "READ THIS FIRST"
http://groups.google.com/group/google-maps-js-api-v3/t/2b3f101fd509919e

[mapusr01]

Hi,

Is there somewhere I can upload all my files? maybe I could tar it up somewhere? I'm not sure.
I think its a bit unfair for the forum host to make this rule and not provide a scratchpad area.

Anyway thanks for your comments...

>Map height and width are 100% of 'content', which is unspecified/
>indeterminate in what you have shown us.

The 'base' page is 4 divs floating in the container wrapper (itself specified as 100%x100%) they are specified
as percentages kinda like a 2x2 quad

row1 20% overall height
row2 80% overall height

column1 is 25% width
column2 is 75% width

im loading content into the bottom right div. I'd rather not have to specify widths and heights in pixels and let
the browser/html work that stuff out for itself. I figure somewhere its converting my % into pixels anyway as
a property

>> jquery load is intended to load page fragments...

It is working remarkably well so far. I'll switch to iframes when it doesnt

>Something that might be going wrong for you is that the map-making...

I inserted a jquery alert box in front of the map instantiation and when I did a load
from the 'base' page into the div an alert box displayed

i'm thinking that this must be a fairly regular thing menu sidebar + content area load a map into
the content area. Are there any simple tutorials for this?

Thx,

[Rossko]

> Is there somewhere I can upload all my files? maybe I could tar it up
> somewhere? I'm not sure.

http://www.google.com/search?q=free+web+hosting

> I think its a bit unfair for the forum host to make this rule and not
> provide a scratchpad area.

Google Maps API terms of use (free version) requires your finished
application to be publicly accessible, so you will need hosting
anyway.
Licensed users may have private maps, but they also have paid for
support.
Other excuses dealt with here
http://groups.google.com/group/google-maps-api/web/why-including-a-link-is-critical

Bear in mind it is your problem ; you want free help, it will pay you
to make it easy for people to help you ; you want fast help, it will
pay you to make it quick for other people to help you ; you want
accurate help, it will pay you to make the whole problem accessible to
other people to help you. I wasted my time having a guess about your
map initialising code not being triggered; but more importantly for
you, you wasted your own time responding to that. All that would be
avoided.

> >Map height and width are 100% of 'content', which is unspecified/
> >indeterminate in what you have shown us.
>

> The 'base' page is 4 divs floating in the container wrapper..

That's nice, but my point was that I can't see any kind of sizing
applied to your 'content' div, and your extra description still
doesn't include any. 100% of undefined is undefined, it is a common
problem for other people posting here, but I'm still only guessing at
what your problem is.
There is no reason why you shouldn't define size in percentages, but
you do need to ensure a complete chain of inheritance from some
defined size - up to the <html> tag if necessary.

> i'm thinking that this must be a fairly regular thing menu sidebar + content
> area load a map into
> the content area. Are there any simple tutorials for this?

Examples, anyway
http://groups.google.com/group/google-maps-js-api-v3/search?group=google-maps-js-api-v3&q=sidebar+example

[mapusr01]

ok __everything__ I am writing in this reply is "for the other interested readers"

I eventually managed to figure this out and it can be done quite easily.

main points of interest

1. All of my divs (everywhere) are specified with percentages %

2. Basically my page layout has a jquery menu system in a sidebar div on the left which allows users to select
    what gets shown in the content area div to the right

3. I simply used a jquery .load('myhtmlfile') to load an html file which covered nearly all of my requirements except for the google map

4. So my google map script is in a separate html file and the jquery .load('gmapfile.html') didn't work this was the problem ie.

  $(#ldmaplink).click( function() {
      $('#mycontentarea').load('mygmapsrcfile.html');
});

doesn't work, for whatever reason

What did work for me was using an iframe and i simply did it like this

 $("#ldmaplink").click( function() {

   document.getElementById('mycontentarea').innerHTML = '<iframe src=\'mygmapscriptfile.html\' width=\'100%\' height=\'100%\'></iframe>;'

});


if anybody finds this useful and wants a more fuller description then just ping this thread and I will be happy to help out as
best I can....I ain't a big expert or nuthin' ....just sayin'


Derp derp derp derp derp...... off now to pull some sweet tricks on my board

Ciao