How to stop the left and right sides of a Google Map being cut off on a mobile phone

Google Maps embedded iframe not showing correctly on mobile

If you want to show a Google Map on your website, for example, directions to your business, you may have noticed that when you view it from a desktop PC, it looks fine. However, when you view the same embedded Google Map on your mobile (when it’s upright in portrait view), the left and/or right sides get clipped so you can’t see the start and end point with the default view once you land on the page (you can, of course, pinch in and out to solve this).

View the map below on your mobile

If you’re having this problem, and it’s nibbling away at you, then here are a couple of solutions that should work.

  1. It may be stating the obvious but simply turning your phone round to view the map in landscape rather than portrait will do the trick!
  2. However, if you want to be pedantic and fix the portrait view then you need to wrap the iframe in a div and apply custom CSS. Here’s how you can do it:

Wrap in a <div> and use responsive CSS

To ensure that an embedded Google Map showing a car route displays properly on mobile devices without being clipped, you can use a responsive CSS trick.

First, go and grab your embed code (the iframe) from Google Maps.

If you’re using WordPress or something similar, add the code to a HTML block in whatever builder you’re using, but wrap the iframe in a responsive container like so:

<div class="map-responsive">
 <iframe src="YOUR GOOGLE IFRAME CODE HERE"></iframe>
</div>

Now all we need to do is make the map responsive with CSS. Again, if it’s WordPress, add the CSS below to your theme’s custom CSS option.

.map-responsive {
  position: relative;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}
.map-responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

The end result

Now, if all has gone to plan, you should now be able to see your start point and destination on the Google iframe map (as above) that you just embedded on your web page, and it’ll be responsive.

The obvious drawback

With the code I’ve used above the pinch in and out option may no longer function but you do get to see the start point and your destination when you land on this page on a mobile phone in portrait view – Alternatively, just turn your phone round to landscape view! 🙂