CODEWITHSUNDEEP
htmlcssgoogle-maps
Derek
Derek

Reputation: 8630

Position content under Google Map

I have a google map that has a block of content over laiyng, which is what i need.

I need to be able to add further content underneath the google map.. but i cant figure out how to get the proceeding div container to sit below the map.

I've tried setting the position to static, but it doesn't work?

Below is my codepen :-

http://codepen.io/dyk3r5/pen/LRmWbq

HTML.

<div id="content">

  <iframe id="gmap" width="600" height="450" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/?ie=UTF8&amp;ll=55.886721,-4.33651&amp;spn=0.011553,0.027466&amp;z=15&amp;output=embed"></iframe>
  <div class="container overlap">
    <h1>Content</h1>

  </div>
</div>

<div class="moreContent">

  <p>I would like to sit below the google map!</p>

<div>

CSS.

#gmap {
  position:absolute;top:0;left:0;z-index:1;
}
.overlap{
  position: relative;
  z-index:2;
  background: white;
  height : 200px;
  width : 200px;
  margin-top: 100px;
}

.moreContent{
  /* How doi position this container? */
}

Upvotes: 0

Views: 581

Answers (1)

Titus
Titus

Reputation: 22474

You can do this 

.moreContent{
    position:absolute; 
    top:450px
}

but a better solution will be not to use position:absolute; on the #gmap element.

Also, you're using an iframe to embed the map into your page, a better solution will be to use the Google Maps JavaScript API for that.

Here is how I will have done it:

#map{
  width: 600px;
  height: 450px;
}

.overlap{
  position:absolute;
  top:100px;
  z-index:2;
  background: white;
  height : 200px;
  width : 200px;
}
<!DOCTYPE html>
<html>
  <body>
    <div id="map"></div>
    
    <div class="container overlap">
       <h1>Content</h1>
    </div>
    <div class="moreContent">
        <p>I would like to sit below the google map!</p>
    <div>
    
    
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: 55.886721, lng:-4.33651},
          zoom: 15
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
    async defer></script>
  </body>
</html>

If you're using the Google Maps JavaScript API you can add elements on the map by creating custom controls, you can find out more about that here: https://developers.google.com/maps/documentation/javascript/controls#CustomControls

Upvotes: 1

Related Questions