Google map over content

I’m trying to set up a google map for the first time as a background, but I can’t get it to sit underneath the content. I tried adjust the z-index, but that didn’t work. I was thinking that maybe I can change the positioning of the map, but I believe I need to stick with absolute positioning.

This is what you’re looking for <div id=“map-canvas”>


The tirck is to change the z-index on other elements as well, something like this:

#content, #LogoAreaContainer {position: relative; z-index: 100;}

Thanks that worked, but I have another issue and I’m not quite sure what it is. I can’t grab the map and scroll on it. I THINK it is because another div is sitting on top of it. I know that if I change the z-index of the map or the content div that I can span/scroll on the map. Is this a common problem to have?

I don’t really understand what your aim is anyway. Why have the map at all if it’s covered by other elements? I don’t really get it.

Well, it is only partially covered if you look at the page.

Hm, it wasn’t showing for me before, but is now. Anyhow, rather than have the content div full width, make it just the width of the contact form, and have margins either side. You’ll still be able to click the map through the margins.