Div over Google Map

Hey chaps…

Just wondering if anyone has achieved this…or whether its impossible…

I would ‘like’ to position a div (with png content) over a google map div.
Ive tried

<div id="map">
<div id="pngdiv"></div>
</div>


		#map{
	height: 336px;
	width: 790px;
	background-repeat: no-repeat;
	background-position: 10px 10px;
	position: absolute;
	z-index: 1;
	}

	#pngdiv{
	background-image: url(imagefiles/...png);
	background-repeat: no-repeat;
	background-position: left top;
	height: 208px;
	width: 274px;
	margin-top: 130px;
	z-index: 2;
}

Try something like this:

#map{
	height: 336px;
	width: 790px;
	background-repeat: no-repeat;
	background-position: 10px 10px;
	[COLOR="Red"]position: relative;[/COLOR]
	z-index: 1;
}

#pngdiv{
	background-image: url(imagefiles/...png);
	background-repeat: no-repeat;
	background-position: 0 0;
	height: 208px;
	width: 274px;
        [COLOR="Red"]position: absolute;
        left: 0;
        bottom: 0;[/COLOR]
	z-index: 2;
}

I got rid of the margin top, instead placing the inner div at the bottom with bottom: 0;

I’m not sure you’ll even need those z-indexes.

Hope that’s of some use.

…i threw in all those z-indexes just to try and get it to work! :wink:

Tried your suggestion and it still doesnt work…when i do a refresh i see that the png div loads in position, however then google map loads over it.

I dont know if it has any relevance, but i use this .js to load it:


var centerLatitude = 44.138856;
var centerLongitude = 10.651245;
var startZoom = 13;
var map;



function init() {
if (GBrowserIsCompatible()) {
	
map = new GMap2(document.getElementById("map"));
map.setUIToDefault();
var location = new GLatLng(centerLatitude, centerLongitude);
map.setCenter(location, startZoom);
var marker = new GMarker(location)
map.addOverlay(marker);
}
}


window.onload = init;
window.onunload = GUnload;

A higher z-index is probably needed.

I’d need to see the full google script to see how high of a z-index they place :slight_smile:

i even knocked up the z index to an obsurd 20…

The full script for the map was included in the post above, and i just call the function:

<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true&amp;key=ABQIAAAAlmc2hhL69DSgqCq86NbWnRRVVoN1mpXURjJ6Mv7AnKsbvV437BTGQtyWlSlL_eVg65mQQ_E1rfq_zA" type="text/javascript"></script>

Just out of curiosity, what is the PNG image that you’re trying to position on top of the map? If it’s a marker then you ought to plot it using the API. Then again, I guess you knew that already.

If all you’re trying to do is position a static image or button over the map then yes, it can be done and it should be quite simple.

Example, go to www.busventure.net – it’s something I’m doing for a German client.

  1. See that map icon on the right?
  2. Click it and an interactive Flash map will load
  3. Click on any country
  4. You’ll get info for that country and a photo
  5. Click the button on top of the photo that says “show route map”
  6. Bingo – a static button on top of a Google map

The CSS needed for this is fairly straighforward.

20 isn’t that high :).

Try setting a z-index of 9999 and see if that fixes the problem

Googles code is compressed making it impossible to read :slight_smile:

Try moving the image out of the div id map and drag it in to position.

Yep - I just tested it on my google maps. The image has to be outside the id map div. Just put another container around the div id map and give that position relative and position the image absolutely within this new container.

lovely…thanks chaps, all works …i was going to post that it failed completely in IE, then i realised i hadnt closed the surrounding div correctly (mozzila can be very good at interpreting bad code!)

many thanks