Adaptive Google Map on your WordPress page

Please add additional rows to .css style file of your web page before inserting Google map on it:

[code language=”css”]
.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;
}
[/code]

When done, you could use html source code from example to insert Goggle map:

[code language=”html”]

[/code]

Now your Google map will be adaptive and will show correctly on all devices.

0 replies

Want to join the discussion?
Feel free to contribute!