SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Evangelist
    Join Date
    Mar 2006
    Posts
    410
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

    Code:
    <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;
    }

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,197
    Mentioned
    456 Post(s)
    Tagged
    8 Thread(s)
    Try something like this:

    Code:
    #map{
    	height: 336px;
    	width: 790px;
    	background-repeat: no-repeat;
    	background-position: 10px 10px;
    	position: relative;
    	z-index: 1;
    }
    
    #pngdiv{
    	background-image: url(imagefiles/...png);
    	background-repeat: no-repeat;
    	background-position: 0 0;
    	height: 208px;
    	width: 274px;
            position: absolute;
            left: 0;
            bottom: 0;
    	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.

  3. #3
    SitePoint Evangelist
    Join Date
    Mar 2006
    Posts
    410
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ..i threw in all those z-indexes just to try and get it to work!

    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:


    Code:
    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;

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,621
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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
    Always looking for web design/development work.
    Willing to do it cheap to build portfolio!

  5. #5
    SitePoint Evangelist
    Join Date
    Mar 2006
    Posts
    410
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:


    Code:
    <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>

  6. #6
    Non-Member
    Join Date
    Mar 2005
    Location
    Bangkok
    Posts
    105
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by barney0o0 View Post
    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:


    Code:
    <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.

  7. #7
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,621
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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
    Always looking for web design/development work.
    Willing to do it cheap to build portfolio!

  8. #8
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Try moving the image out of the div id map and drag it in to position.

  9. #9
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,656
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    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.

  10. #10
    SitePoint Evangelist
    Join Date
    Mar 2006
    Posts
    410
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •