Google Map Field front-end zoom UI broken

• 61pixels

• May 15, 2014 at 10:01 am

Everything works just fine on the backend, but on the front-end, the Google UI for the zoom area is all broken apart into pieces and you can’t click on any of it. You can use your scroll wheel of course, but the interface itself is completely broken and results in the closed hand icon over the entire map.

Screenshot is attached. This is using WP 3.9.1 and ACF 4.3.8. I’ve also deleted my entire stylesheet to verify it isn’t some weird conflict.

• rliverman

• May 15, 2014 at 10:20 am

This is generally caused by responsive designs setting max width 100% on all images.

Try this on whatever the wrapper div is that holds the map:

.map-wrapper img{
  max-width:none !important;
}

That will make sure that map images (and only map images) aren’t distorted.

• 61pixels

• May 15, 2014 at 10:23 am

You are the man! I had deleted my entire CSS file to test and it didn’t fix it, but I forgot that in my separate foundation.css file I had some styles affecting images.

Adding that line worked like a charm. Thanks so much.