How to Create Responsive Google Map For Your Website or Blog

If you want to create Responsive Google Map, then you have two options, first with CSS and the second is JavaScript.  Today, a lot of designers and developers are struggling to Embed Google maps in responsive designs.

First basic steps with CSS for creating a responsive Google Map.

Responsive Google Map CSS

.googlemap-container {

    position: relative;

    padding-bottom: 26.25%;

    padding-top: 30px;

    height: 0;

    overflow: hidden;

}

.googlemap-container iframe,

.googlemap-container object,

.googlemap-container embed {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

}

Responsive Google Map HTML Markup

Responsive Google Map with JavaScript

Use the following Javascript code before end the head tag into your website html file.

HTML markup

It is working fine on your phone or tablet.