Embedding a Google Map on your WordPress website and making it behave responsively involves the exact same concept as embedding a video responsively. Go to Google Maps, grab the iframe code from the map that you want to embed, and paste it inside a container div in a WordPress page or post content area.
Next, you’ll need to add some CSS code that looks like this:
https://gist.github.com/danbru1989/ca6da965f13baba5c4adef1b2f7deaa0
The padding-bottom: 56.25% forces the map-container into a 16:9 aspect ratio. This is great for a wide screen, but, because this is a map, you might want to make a media query that will only change the aspect ratio to 16:9 on wide displays. In this case, default the padding-bottom to 75% and things will look sharp on smaller devices. This will force the map-container to a 4:3 ratio. (3 / 4 = .75) For more info, check out the source below.
Source:
Flywheel – How to add a responsive Google Map in WordPress
Leave a Reply