Categories
Wordpress

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

You might have noticed some problems with the Google Map on this site. Irritatingly, the information ‘balloons’ that appear when you click on a map pin were ending up with jagged edges. The problem turned out to be with Wordpress – specifically the TwentyTen stylesheet. This post explains how to fix the problem.

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.

Leave a 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.