CODEWITHSUNDEEP
twitter-bootstrapgoogle-mapsiframe
xtjnrchris
xtjnrchris

Reputation: 45

Google Maps iframe responsive issue

I've tried to make the google iframe map responsive, but when viewed on mobile, the map remains the same size instead of resizing. I've tried replacing the code multiple times (based on answers found here), but have not found the solution to my problem. Would appreciate if someone could point out my mistake.

/* Google Map */
.google-maps {
        position: relative;
        padding-bottom: 75%; // This is the aspect ratio
        height: 0;
        overflow: hidden;
    }
    .google-maps iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important;
        height: 100% !important;
    }

HTML 

<div class="col-lg-6 col-md-6 col-sm-12" class="google-maps">
  <iframe src="https://www.google.com/maps/d/embed?mid=1vQ8RDv0RplunNZfvdhgPTtCSjGA" width="600" height="450" frameborder="0" style="border:0"></iframe>

Upvotes: 1

Views: 1379

Answers (2)

Android Enthusiast
Android Enthusiast

Reputation: 4950

You need to set some rules for the iframe. By setting an absolute position we are telling the that it can take up the space of its parents padding and height. To position the iframe within the parent element (cc-map-wrapper), we use top and left properties. Lastly, by adding width and height we obtain the responsive look we are after.

.cc-map-wrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.cc-map-wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

Here's a related SO ticket which discuss how to make a responsive Google maps: Responsive Google Map?

Upvotes: 1

Baxet
Baxet

Reputation: 85

Is using Javascript an option? I would just go for making the iframe width:100% and using JS to set the height according to your chosen aspect ratio.

For example you can use jQuery : 

$('.google-maps>iframe').height(
    $('.google-maps>iframe').outerWidth()*3/4
); //for a 4:3 aspect ratio

Upvotes: 0

Related Questions