Skip to content

Adjust google maps height dynamic in row

Alejandro Vales

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%;
}

Advertisement

Answer

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>