WordPress broken your Google map? This is how to fix it

You might have noticed some problems with the Google Map on this site at some point in the past.

Information ‘balloons’ had jagged edges and looked like this:

Faulty information balloon on Google Map - showing jagged corners in top and bottom right hand corners

when they should have looked like:

Fixed info balloon on Google Map with nicely smooth rounded cornersThe problem turned out to be with WordPress – particularly the TwentyTen stylesheet used as a base for the Winchester Marmalade template for this site.

In essence, this section of the stylesheet that sets the width for images on the WordPress page makes the images used for the map too narrow:

#content img {
margin: 0;
max-width: 640px;
}

So the daughter stylesheet needs to include something that gets rid of the width limit in the map like:

#content .boundarymap img {
max-width: none;
}

Many thanks to security_man and p for posting solutions to the problem.

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.
This entry was posted in Wordpress. Bookmark the permalink.

Get in Touch

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.