CODEWITHSUNDEEP
cssgoogle-maps-api-3
michltm
michltm

Reputation: 1469

responsive google-maps in div

I have a row with three columns. The first column has a responsive picture. The second column displays a google map. I'd like this map to follow the same behaviour than the picture in terms of height and width. So, when all the columns are in a row they have the same height and when the screen gets smaller and the columns go one on top of the others, the google map should follow the picture's width. Is that possible?

Here is the code:

   <!DOCTYPE html>
   <html>
   <head>

   <link rel="stylesheet" type="text/css" href="https://bootswatch.com  /cerulean/bootstrap.css" ></link>
   <link rel="stylesheet" href="https://bootswatch.com/assets/css/custom.min.css">


    <script src="http://maps.googleapis.com/maps/api/js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>


    <script>
    function initialize() {
      var mapProp = {
        center:new google.maps.LatLng(51.508742,-0.120850),
        zoom:5,
        mapTypeId:google.maps.MapTypeId.ROADMAP
      };
     var map=new     google.maps.Map(document.getElementById("googleMap"),mapProp);
    }
    google.maps.event.addDomListener(window, 'load', initialize);
    </script>

    </head>


    <div class="panel panel-default well">

      <div class="row">

        <div class= "col-sm-4"  style='background-color: white; overflow: hidden' >
      <p>Column 1</p>

     <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/0e/HRSOA_AsherDurand-First_harvest_wilderness_1855.jpg/1280px-HRSOA_AsherDurand-First_harvest_wilderness_1855.jpg" alt="landscape" class="img-responsive"  > 

        </div>

        <div class= "col-sm-4" style='background-color: white;overflow: hidden'>
           <p>Column 2</p>

           <body>
           <div id="googleMap" style="width:500px;height:380px;"></div>
           </body>

        </div>

        <div class= "col-sm-4" style='background-color: white'>
            <p>Column 3</p>

        </div>

      </div>

    </div>

Thanks for your help.

EDIT

To be a bit more clear, here is an image of what I intend to do and the result by fixing the height as suggested by @MattiaNocerino: width and height are ok on (1) but the height is not responsive on 2-3-4 were I'd like it to not be higher than the dotted line to follow the picture's height.

enter image description here

Upvotes: 0

Views: 1905

Answers (1)

Mattia Nocerino
Mattia Nocerino

Reputation: 1513

Set the width to auto, height = 0 and padding = as the width of the image * 100 / height of the image.

Check this fiddle!

http://jsfiddle.net/jf70rsL5/1/

<div class="column">
    <img src="http://www.planwallpaper.com/static/images/i-should-buy-a-boat.jpg">
</div>
<div class="column">
    <div id="map"></div>
</div>
<div class="column last"></div>

.column{
    float:left;
    width:30%;
    margin-right:5%;
    background-color: #f5f5f5;
    height:300px;
}

img{
    max-width:100%;
    height: auto;
}

.last{
    margin-right:0%;
}

#map{
    width: auto;
    height: 0;
    padding-bottom: 56.247%; /*image width * 100 / height*/
    background-color: #ccc;
}

Upvotes: 1

Related Questions