Google Maps responsiv

Google Karte kann wie folgt responsiv eingebettet werden:

http://www.labnol.org/internet/embed-responsive-google-maps/28333/

This is the default embed code for the new Google Maps:

    <!-- Height=450px; Width=600px -->
    <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d7098.94326104394!2d78.0430654485247!3d27.172909818538997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1385710909804" width="600" height="450" frameborder="0" style="border:0"></iframe>

As specified in the height and width parameters of the embed code, the default height for medium embeds is 450px or 75% of the default width (600px).

If you wish to transform this static sized Google Map into one that is responsive, all you have to do is add a few CSS rules to your web page and wrap the embed IFRAME inside these rules.

    <style>
        .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;
        }
    </style>

    <div class="google-maps">
        <iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d7098.94326104394!2d78.0430654485247!3d27.172909818538997!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2s!4v1385710909804" width="600" height="450" frameborder="0" style="border:0"></iframe>
    </div>

The new embed code with responsive style will be something like this. You can change the value of padding-bottom (line #4) from 75% to something for a different aspect ratio.

Knowledge base

GoogleMaps

Google Maps responsiv