CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrapgoogle-maps
Alejandro Vales
Alejandro Vales

Reputation: 2937

Adjust google maps height dynamic in row

I have this example (click here) in which im trying to make the height of a google map adjustable dynamic to the span that is beside it.

Any help is very appreciated.

<!DOCTYPE html>
<html>
  <head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <style>
      #map {
        width: 500px;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="span8">
          <p>This is something dynamic and longer than the map.</p>
          <p>I want the map to adapt to this span</p>
          <p>N/A</p>
          <p>N/A</p>
          <p>N/A</p>
          <p>N/A</p>
          <p>N/A</p>
          <p>N/A</p>
          <p>N/A</p>
          <p>N/A</p>
          <p>N/A</p>
          <p>N/A</p>
          <p>N/A</p>
          <p>N/A</p>
          <p>N/A</p>
          <p>N/A</p>
          <p>N/A</p>
          <p>MAP'S HEIGHT SHOULD FILL TILL HERE AND <b>NOT</b> BE SPECIFIED WITH <b>FIXED</b> HEIGHT</p>
        </div>
        <div class="span4">
          <div id="map"></div>
        </div>
      </div>
    </div>
    <script>
      function initMap() {
        var mapDiv = document.getElementById('map');
        var map = new google.maps.Map(mapDiv, {
          center: {lat: 44.540, lng: -78.546},
          zoom: 8
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
        async defer></script>
  </body>
</html>

The common solutions are not working.

html, body{
  height: 100%;
}

Upvotes: 2

Views: 1546

Answers (2)

Alejandro Vales
Alejandro Vales

Reputation: 2937

After some hours of research and CSS frustrating experiences, I guess the best way to do it is javascript.

Still for if you want a CSS only solution there is another one underneath

var initialHtml = document.getElementById('prCol1').innerHTML;

setInterval(function(){
    document.getElementById('prCol1').innerHTML += '<p>N/A</p>';
    var divh = document.getElementById('prCol1').offsetHeight;
    document.getElementById('map').style.height = divh + 'px';
    google.maps.event.trigger(document.getElementById('map'),'resize');
}, 1000);

setInterval(function(){
    document.getElementById('prCol1').innerHTML = initialHtml;
    var divh = document.getElementById('prCol1').offsetHeight;
    document.getElementById('map').style.height = divh + 'px';
    google.maps.event.trigger(document.getElementById('map'),'resize');
}, 5000);
<!DOCTYPE html>
<html>
  <head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <style>
      #map {
        width: 500px;
        height: 400px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="row">
        <div class="span8" id="prCol1">
          <p>This is something dynamic and longer than the map.</p>
          <p>I want the map to adapt to this span</p>
          <p>N/A</p>
          <p>N/A</p>
          <p>N/A</p>
          <p>N/A</p>
          <p>N/A</p>
          <p>N/A</p>
          <p>N/A</p>
          <p>N/A</p>
          <p>N/A</p>
          <p>N/A</p>
          <p>MAP'S HEIGHT SHOULD FILL TILL HERE AND <b>NOT</b> BE SPECIFIED WITH <b>FIXED</b> HEIGHT</p>
        </div>
        <div class="span4">
          <div id="map"></div>
        </div>
      </div>
    </div>
    <script>
      function initMap() {
        var mapDiv = document.getElementById('map');
        var map = new google.maps.Map(mapDiv, {
          center: {lat: 44.540, lng: -78.546},
          zoom: 8
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
        async defer></script>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="https://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
    <style>
      .table {
        display:table;
        height:100%;
      }
      .table-row {
        display:table-row;
      }
      .table-cell {
        display:table-cell;
        width:40%;
        height:100%;
        vertical-align: top;
      }
      #map {
        height: 100%;
        width: 100%;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <div class="table">
        <div class="table-row">
          <div class="table-cell">
            <p>This is something dynamic and longer than the map.</p>
            <p>I want the map to adapt to this span</p>
            <p>N/A</p>
            <p>N/A</p>
            <p>N/A</p>
            <p>N/A</p>
            <p>N/A</p>
            <p>N/A</p>
            <p>N/A</p>
            <p>N/A</p>
            <p>N/A</p>
            <p>N/A</p>
            <p>N/A</p>
            <p>N/A</p>
            <p>N/A</p>
            <p>N/A</p>
            <p>N/A</p>
            <p>MAP'S HEIGHT SHOULD FILL TILL HERE AND <b>NOT</b> BE SPECIFIED WITH <b>FIXED</b> HEIGHT</p>
          </div>
          <div class="table-cell">
             <div id="map"></div>
          </div>
        </div>
      </div>
    </div>
    <script>
      function initMap() {
        var mapDiv = document.getElementById('map');
        var map = new google.maps.Map(mapDiv, {
          center: {lat: 44.540, lng: -78.546},
          zoom: 8
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?callback=initMap"
        async defer></script>
  </body>
</html>

Upvotes: 1

Bonzai
Bonzai

Reputation: 159

You wouldn't be able to do this with CSS. The height for span8 has no impact on span4.

You would have to use javascript (offsetHeight) to calculate it to the height of span8 div and apply it to span4.

Something similar to this: get height of a div and set the height of another div using it

Upvotes: 1

Related Questions