• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • Menu
  • Back to Top
  • Services
    • Web Design
    • Graphic Design
    • Web Hosting
  • Portfolio
  • Pricing
    • FAQ’s
  • About Me
    • Blog
    • Contact

Embedding Google Maps Responsively

Embedding a Google Map Responsively

August 15, 2017Dan BrubakerComment

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

Filed Under: Tips & Code Snippets

About Dan Brubaker

I am a husband, father, evangelist, web designer, and sometimes farmer. My family and I live full-time in an RV and travel around representing Servant's Heart Camp. My workspace is small, but the window view is great!

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Contact Me

  • (717) 991-1426
  • danbru@gmail.com

Mailing Address:


5050 Colebrook Road
Hershey, PA 17033

RSS Ministry Updates

  • Ministry Changes & Moving November 4, 2020
  • Revival Ministry and HFA Crusade September 23, 2020
  • Attend Our Online Rally! April 16, 2020
  • Winter Ministry & Outreach February 11, 2020
  • Happy New Year! January 1, 2020
  • Last Meeting And Winter Work November 18, 2019
  • Continued Fall Revival Meetings November 4, 2019
  • Visiting The Quecreek Mine Rescue October 14, 2019
  • Menu
  • Back to Top
  • Services
    • Web Design
    • Graphic Design
    • Web Hosting
  • Portfolio
  • Pricing
    • FAQ’s
  • About Me
    • Blog
    • Contact

    Services

  • Web Design
  • Graphic Design
  • Web Hosting

    Information

  • About Me
  • Portfolio
  • Pricing
  • Privacy

    Contact Me

  • (717) 991-1426
  • danbru@gmail.com
Log In
Copyright © 2023 — Brubaker Design Services