Расположение содержимого на карте Google

#html #css #google-maps

#HTML #css #google-карты

Вопрос:

У меня есть карта Google, на которой есть блок содержимого поверх laiyng, и это то, что мне нужно.

Мне нужно иметь возможность добавлять дополнительный контент под картой Google .. но я не могу понять, как заставить текущий контейнер div располагаться под картой.

Я пытался установить положение на статическое, но оно не работает?

Ниже приведен мой 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=UTF8amp;amp;ll=55.886721,-4.33651amp;amp;spn=0.011553,0.027466amp;amp;z=15amp;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? */
}

Ответ №1:

Вы можете сделать это

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

но лучшим решением будет не использовать position:absolute; #gmap элемент.

Кроме того, вы используете an iframe для встраивания карты на свою страницу, лучшим решением будет использовать для этого JavaScript API Google Maps.

Вот как я это сделаю:

 #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>

Если вы используете JavaScript API Карт Google, вы можете добавлять элементы на карту, создавая пользовательские элементы управления. Подробнее об этом здесь: https://developers.google.com/maps/documentation/javascript/controls#CustomControls