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%withnone.
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.
If you liked this post, you may want to subscribe to my RSS feed. Additional info on subscribing can be found here. Thanks for visiting!
All posts
Thank you.
I have no idea IE demands a <div> wrapping.
I won’t argue with success.
Thanks for your plugin, Avi!
Yeah - doesn’t make any sense to me either, just glad it’s been solved!
Thanks for the solutions. I appreciate the amount of time and effort spent sorting this out.
I couldn’t understand some parts of this article e Maps Plugin Works for K2 Theme in Internet Explorer and Firefox at blogan, but I guess I just need to check some more resources regarding this, because it sounds interesting.
I’m also using that great plugin within my K2 powered blog.
When I use Live Search or Rolling Archives, the maps aren’t displayed.
Is there a workaround?
I assume that the JavaScript of Avi’s plugin has to be called after AJAX actions. But I don’t know where.
@Alex, I’m using both Live Search and Rolling archives in a K2 blog. I’m also using the latest K2 nightly. That might be the difference. YMMV.
When I type “maps” into your search box, only this appears:
“…blog in both Firefox and Internet Explorer!
This is a test in hybrid display mode.
Need two maps for the full test…
Portland, Oregon
To duplicate my success…”
The maps are not displayed in that case. Tested with FireFox 2.0.0.11.
That’s the same behaviour as on my website. I’m still looking for a solution. Has anyone an idea?
Alex, I’m not able to duplicate the results of either your search or your failure to see both maps in hybrid mode in either FF or IE6.
Do you see both the maps on this post in hybrid mode? What browser(s) are you using? What blog software and theme are you using and their versions?
The maps are not loading when the content is loaded by AJAX. I use FF 2.0.0.11! I’ll send you a screenshot how it looks on my screen!
On my blog I’m using WP 2.3.1, K2 RC3 and style True Blue SVN.
@Alex, click on the post’s title.
Then the post will be loaded and everything is fine.
I guess I’m content with that behavior, but I can see why you’d want it fixed. You could submit an issue on the K2 bug tracker.