11

I have a full-width google map on a page using height="100%" and width="100%". I want to know put some css div stuff on top of it. I read that using negative values such as margin-top: -500px; will work, and they do, however when I try to assign a color to the background of the div, it doesn't display it over the map, it displays it under it, which isn't what I want at all. Is there a solution to this? Code:

<iframe width="100%" height="100%" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps?hl=en&amp;ie=UTF8&amp;ll=37.0625,-95.677068&amp;spn=56.506174,79.013672&amp;t=m&amp;z=4&amp;output=embed"></iframe>

<div class="content"> I want this text to be in a div box that has a black background. <br /> </div>

Style:

.content {
     margin-top: -500px;
     width: 390px;
     background-color: black;
}
Matisse VerDuyn
  • 1,148
  • 15
  • 40
Joshua Terrill
  • 1,995
  • 5
  • 21
  • 40

4 Answers4

16
html, body {
    width: 100%;
    height: 100%;
}

.map-frame {
    width: 100%;
    height: 100%;
    position: relative;
}

.map-content {
    z-index: 10;
    position: absolute;
    top: 50px;
    left: 50px;
    width: 390px;
    background-color: black;
    color: #FFF;
}

http://jsfiddle.net/oswaldoacauan/tx67C/

Oswaldo Acauan
  • 2,730
  • 15
  • 23
3

If I may, I used the following even without css for the map.

Just put width="100%" in the iframe

<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1994.873621232488!2d32.58519671879903!3d0.342002233462275!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x177dbbaed45800cb%3A0xfba72049a6cb630c!2sKamwokya%20Market%2C%20Kampala!5e0!3m2!1sen!2sug!4v1633372520333!5m2!1sen!2sug" width="100%" height="500" style="border:0;" allowfullscreen="" loading="lazy"></iframe>


<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1994.873621232488!2d32.58519671879903!3d0.342002233462275!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x177dbbaed45800cb%3A0xfba72049a6cb630c!2sKamwokya%20Market%2C%20Kampala!5e0!3m2!1sen!2sug!4v1633372520333!5m2!1sen!2sug" width="100%" height="500" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
lailah grant
  • 31
  • 2
2

add this to your css. works in chrome at least

position:absolute;
z-index:9999;
color:#fff;
daniel.auener
  • 1,276
  • 2
  • 12
  • 17
1

the div you want to style should be positioned absolutely and given a positive z-index so that it shows above the map not below

Afzaal
  • 21
  • 4