Question

Today I started to implement Google maps into my site, but I’ve ran into a problem, because the div with the maps provided for me can’t be put into another div?!

I use the code stated on this site and when I do something like

<div><div id="map_canvas" style="width:100%; height:100%"></div></div>

it stops working. Why? I don’t want my maps to be displayed over the whole page, I want it to be displayed in an normal div which I can restyle whenever I want…

Answer 1

You can style the div map_canvas. It doesn’t need putting inside another div to do that.

So for example, change your code to this:

     <div id="map_canvas"></div>

And CSS:

#map_canvas{
    width:400px; /* your own height here */
    height:300px;  /* your own height here */
     border:solid 1px green;  /* your own border if you like */

    /* maybe you want to position it somewhere? you can do for example */
   position:absolute; top:50px; left:50px; 

 }

UPDATE

Apparently you need to set the width & height on the parent DIVS too. I haven’t tested this yet, though try the following:

<div id="mapHolder"><div id="map_canvas" style="width:100%; height:100%"></div></div>


#mapHolder {width:100%; height:100%;}

Failing that, have you tried an absolute size, rather than % as in my CSS at the top of this answer?