Tips: Embed Google Maps and Calendars in a responsive WordPress theme

One of the trickiest things about responsive design is the lack of support given to users of services like Google Maps and Google Calendars. Most embed codes for these services specify a fixed width with is not terribly helpful.

Well there is a really simple fix which Niklaus Gerber highlights on his blog. Niklaus shows the issue solved for Google Maps and Bing Maps but it also does the trick for Google Calendars too.

Just add the following CSS to your WordPress site somewhere:

/* Responsive iFrame */

.responsive-iframe-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.responsive-iframe-container iframe,   
.vresponsive-iframe-container object,  
.vresponsive-iframe-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

And then wrap your Google Map or Google Calendar iframe in a div like this:

<!-- Responsive iFrame -->
<div class="responsive-iframe-container">
    <... iframe code >
</div>

And in case you are wondering this doesn’t solve the same problem with all those awful facebook widgets. Facebook too assumes we live in a fixed width world!

23 thoughts on “Tips: Embed Google Maps and Calendars in a responsive WordPress theme

  1. I tried this out but it did not work for me and I’m not sure why. I added it css and the php but it won’t resize to the screen.
    Can anyone help me and point me in the right direction.

  2. Excellent.

    Thank you very much for posting this.

    By way of returning the favour, if whenm embedding Google Maps you want to remove the annoying speech bubble which gets cut in half in maps that aren’t very tall, but you want to keep the red pin, follow these instructions:

    1. Locate yours positon on Google Maps, and download your iframe code from Google using the link button to get the code. When you’ve done that you need to identify whether or not it includes the ‘iwloc’ code, which will look something like this, sandwiched between two ampersand codes:

    &iwloc=A&

    If your code does include this, ALL you have to do, is simply remove the uppercase A like so:

    &iwloc=&

    Bingo! You’re done.

    If the above code is missing from iframe code, then you’ll need to add it in, exactly how it displays above.

    That’s it. Simple huh.

    Have fun.

    Andy

  3. This rocks! but on iphone the right side of the calendar over extends the width of the phone. anyone know a fix for that?

  4. Thanks for sharing, little tip:

    Use the !important rule in your CSS if it´s not working for you…

    /* Responsive iFrame */

    .responsive-iframe-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
    }

    .responsive-iframe-container iframe,
    .vresponsive-iframe-container object,
    .vresponsive-iframe-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    }

  5. This post was super helpful in a recent client project I was working on. I cited this very ThemeLoom post in a writeup I did describing a few extra steps to take advantage of some available options via Google Calendar’s iframe embed helper tool. Hopefully you don’t mind me sharing how I used this as an awesome starting point:

    http://www.profromgo.com/google-calendar-responsive/

    Thanks for the helpful post!

  6. What if the width is larger than or equal to 1200px? I think Bing Maps extend only to 1000px width-wise. Any solutions for it?

  7. This is nice solution.
    However it does not work in mobile Chrome for example.
    If the Chrome i switched to desktop mode, even on the same mobile device it works. On other devices (phones) it doesn’t both ways..

    Any ideas how this could be fixed?

  8. Quite often, I can just remove width”800px” for example and replace it with width”100%” and that will fix basic widgets in most cases.

  9. Hi,

    this looks exactly like what I would need. However, I cannot make it work. I am using a responsive child theme and assumed that all I have to do is to add the css code in the style.css of the child theme. However, I only get a blank section :-( Any ideas?

    Thank you and merry Xmas!

  10. So it is possiblle even on better way to deal with this, but still zoom inside map is real problem.

    google.maps.event.addDomListener(window, ‘load’, initialize);
    google.maps.event.addDomListener(window, “resize”, function() {
    var center = map.getCenter();
    google.maps.event.trigger(map, “resize”);
    map.setCenter(center);
    map.setZoom(4);