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%withautonone
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 ).
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>
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
Great workaround
Great workaround
Unfortunately didn’t work for me
I’m using the K2 3 column theme - maybe that’s why.
Unfortunately didn't work for me
I'm using the K2 3 column theme - maybe that's why.
Thnx for the help!
It works now almost perfect. I have the weird error that in IE7 the landmark doesn’t show up, and in FF everything is ok.
–time elapsed–
But I noticed now that you have the same problem here on this site with IE7 and FF
Thnx for the help!
It works now almost perfect. I have the weird error that in IE7 the landmark doesn't show up, and in FF everything is ok.
–time elapsed–
But I noticed now that you have the same problem here on this site with IE7 and FF
I am the original Google Maps plugin author.
Good to know people are solving problems while using it
The plugin is extremely simple, it only replaces some HTML elements and fires standard Google Maps API methods.
All visual problems I have seen happen because of CSS conflicts between what Googla Maps API and its created elements need, and the page the map is embedded.
BTW, the plugin is being improved. Next version will let you create a complex map with many different markers, lines, polygons on the My Maps section of the Google Maps website, and simply paste the URL for it to the plugin to get that complex map on your page. The Google Maps website will work as a maps manager and builder for your maps, that will be embedded in your site. Pretty cool.
I am the original Google Maps plugin author.
Good to know people are solving problems while using it
The plugin is extremely simple, it only replaces some HTML elements and fires standard Google Maps API methods.
All visual problems I have seen happen because of CSS conflicts between what Googla Maps API and its created elements need, and the page the map is embedded.
BTW, the plugin is being improved. Next version will let you create a complex map with many different markers, lines, polygons on the My Maps section of the Google Maps website, and simply paste the URL for it to the plugin to get that complex map on your page. The Google Maps website will work as a maps manager and builder for your maps, that will be embedded in your site. Pretty cool.
Hi,
I have the opposite problem - this fix works for IE7 but not FireFox 2.0.0.3. For an example of it working/not, please see here.
Cheers, Andrew
[Edited link to shorten its display. --blogan]
Thanks for that, great workaround and only spent about 30 minutes looking for the solution and fixing the problem.
Thanks also to Avi Alkalay, where I found the link to this site.
My husband will be mad that I beat him to it, as he spent ages trying to fix the same thing on his K2 based blog, but never got it sorted
Cheers
Jane
here.
Cheers, Andrew
[Edited link to shorten its display. --blogan]
Avi, thanks for the program and the link. It’s fun and cool!
Andrew, I checked out your site in IE6 (not IE7) and Firefox 2.0.0.3. Seems to work in Firefox, but IE6 failed to display the red marker. Using Firefox and the Web Developer extension, I discovered that the red marker is an img having the class “gmnoprint”. Maybe applying a style setting its z-index will help in IE. Might be time for some more experimentation…
Jane, it always comes down to the battle of the sexes, doesn’t it?
Glad I could help.
Thanks for that, great workaround and only spent about 30 minutes looking for the solution and fixing the problem.
Thanks also to Avi Alkalay, where I found the link to this site.
My husband will be mad that I beat him to it, as he spent ages trying to fix the same thing on his K2 based blog, but never got it sorted
Cheers
Jane
Avi, thanks for the program and the link. It's fun and cool!
Andrew, I checked out your site in IE6 (not IE7) and Firefox 2.0.0.3. Seems to work in Firefox, but IE6 failed to display the red marker. Using Firefox and the Web Developer extension, I discovered that the red marker is an img having the class “gmnoprint”. Maybe applying a style setting its z-index will help in IE. Might be time for some more experimentation…
Jane, it always comes down to the battle of the sexes, doesn't it?
Glad I could help.
Thanks blogan,
I’ve just seen it work in FireFox 1.5 on a friend’s machine, but not on my work PC that also runs FF 2.0.0.3 - it is wierd
I’m happy to accept that it is something in my own way of setting up FireFox that is the real issue.
I’ll look into the IE 6/z-index style thing, and if anything comes of it, will pass it on here.
Cheers, Andrew
Andrew, after looking more closely at what gets embedded in the page, img.gmnoprint already gets a local style applied with a very negative z-index.
Thanks blogan,
I've just seen it work in FireFox 1.5 on a friend's machine, but not on my work PC that also runs FF 2.0.0.3 - it is wierd
I'm happy to accept that it is something in my own way of setting up FireFox that is the real issue.
I'll look into the IE 6/z-index style thing, and if anything comes of it, will pass it on here.
Cheers, Andrew
Andrew, after looking more closely at what gets embedded in the page, img.gmnoprint already gets a local style applied with a very negative z-index.
Hi blogan,
Scary thing - I thought it was nuts but a friend suggested updating my JRE - and now your solution works in FireFox 2.0.0.3. How this is, I do not know, I am just happy that it works now
I’ll check back every now and then to see if there is a fix to the IE6 thing - that said, I have to say that I am pretty happy to have found a working solution for IE7/FireFox.
Thanks, Andrew
Hi blogan,
Scary thing - I thought it was nuts but a friend suggested updating my JRE - and now your solution works in FireFox 2.0.0.3. How this is, I do not know, I am just happy that it works now
I'll check back every now and then to see if there is a fix to the IE6 thing - that said, I have to say that I am pretty happy to have found a working solution for IE7/FireFox.
Thanks, Andrew