Twitter API Question posted in
The official Twitter API documentation can be found here.

Adjust google maps height dynamic in row – Twitter-api

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

2

Answers


  1. Chosen as BEST ANSWER
    0

    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>


  2. 0

    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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search