Please see my later post on this topic.

Thanks to the help on the kaytwo Google Code forum, the Googlemaps plugin now works with the K2 theme on blogan.net.

Update: Argh! It appears to work only with Firefox. Time for debugging…

Update 2: Okay, I lied. I didn’t delete the offending line, I had changed 100% to auto. Fixed that. Still doesn’t work, sorta. Clicking on “satellite” or “hybrid” shows the satellite view. The map view does not work.

Update 3: Even stranger. Zooming out the map by one click fixes the map and hybrid display issue for Internet Explorer. No, I don’t know why. Issue closed?

Update 4: Of course not. I added another map (while keeping the original) that is zoomed out a little more and is in hybrid display mode. IE6 is still having problems with the original map, now displaying it only as a link. IE6 displays the newer map in map mode, not hybrid.

Update 5: Strangely enough, switching from K2 to the default theme doesn’t help. Now Firefox displays both maps as gray backgrounds. IE6 showed the same behavior as for K2.

Original post continues below…

Here’s how you can do it:

The K2 theme has a couple problems displaying Google maps using the Google Maps plugin. The first, and largest problem is that the map doesn’t display; instead there is only a gray background. To fix this, search style.css for the following text:

#primary .entry-content img {
	margin: 0 5px;
	padding: 4px;
	border: 1px solid #ccc;
	max-width: 100%;
	}

The max-width line is the problem. You have three options:

  • Delete or comment out the max-width line of text.
  • Change the 100% value to a lower percentage. You’ll need to experiment to find the appropriate value.
  • Replace 100% with auto none.

I chose the first option. Regardless which one you choose, you’ll have to edit style.css every time you update your K2 theme. (If you’re staying on the bleeding edge by running nightly or SVN distributions, this might get old…)

You cannot use a K2 scheme css file to override the max-width property; it doesn’t work. In fact, if your style.css does not have a max-width property for #primary .entry-content img and your scheme css file does, you’ll still have problems.

Update 6: The correct attribute for max-width is not auto, it is none. Making that change allows a custom scheme to override the max-width property using the following style.

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

End of Update 6.

The second problem makes the “map,” “satellite,” and “hybrid” buttons too tall. This was traced by people smarter than me to another portion of the style.css file. Fortunately, this problem can be solved by inserting the following text in your custom scheme file:

.entry-content div { 
	margin: 0; 
	}

You only have to do this once. Updating your K2 theme should have no effect (unless of course, the K2 authors make this fix unnecessary or find some other way to complicate life :wink: ).

If you’re not using a scheme file, place the text at the end of your style.css file. You’ll then need to remember to make this change every time you update the K2 theme.

Update 7 (May 29, 2007): Thanks to Josh’s comment, I discovered that I can fix the Internet Explorer problem by wrapping the mapping information with <div> tags. For example, the first map above is created with

<div><a href="http://maps.google.com/maps?f=q
&hl=en&q=4440+Winding+Way,+Sacramento,+CA+95841&
sll=37.0625,-95.677068&sspn=47.033113,68.115234
&layer=&ie=UTF8&z=16&ll=38.641931,-121.360645
&spn=0.011397,0.023668&t=h&om=1&iwloc
=addr" title="googlemaps">This is a test in hybrid display mode with the map zoomed out more.</a></div>