Update: If you don’t see maps, it’s likely that I disabled the Google Maps Plugin. Google now offers much the same functionality without the slowdown on every page load, regardless whether there’s a map on the page. Also, the funny stuff needed for CSS files is now built into the latest versions of K2.
Finally, thanks to all the help on the kaytwo Google Code forum and Avi Alkalay’s blog, Avi’s Google Maps Plugin for WordPress now works on my K2 blog in both Firefox and Internet Explorer!
This is a test in hybrid display mode.
Need two maps for the full test…
To duplicate my success, you’ll need to do a few things. The first two involve modifying your CSS.
K2’s most serious problem with the Inline Google Maps Plugin is displaying a gray background instead of the map. 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 declaration is the culprit. 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 none.
I recommend using the third option by placing the following in your custom scheme file:
#primary .entry-content img {
max-width: none;
}
You will only have to do this once. Updating your K2 theme should have no effect.
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.
K2’s second problem is displaying the “map,” “satellite,” and “hybrid” buttons too tall. This was traced by people smarter than me to another portion of the style.css file. You can solve this issue by inserting the following text in your custom scheme file:
.entry-content div {
margin: 0;
}
The next change needs to be done each time you insert a map. After you create the anchor link, wrap it in <div> tags. For example, the 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.</a></div>
Notice the <div> tags surrounding the rest of the information. (I also arbitrarily broke the lines in the example listing so it would fit within my margins.)
That should do it!
This is a republication of an earlier post, heavily edited for simplicity.
Latest Comments