Google Maps and IE8

johndh · #1 Feb 27, 2010, 10:32 AM

I've been knocking my brains out trying to find out why Google Map doesn't work correctly in IE 8, it works fine in FF though. Using the latest theme ver and wordpress 2.9.2 The map code is the iFrame as generated by google and pasted into the page in html mode.

http://www.canisphouse.com/how-to-find-us/

What I did find out, is that if I right click on the place where the map should be, and select refresh from the pop-up menu, the map shows. Any thoughts or ideas are greatly appreciated.

Thanks

John

PS, I have striped out image styling except for a 1px border

juggledad · #2 Feb 27, 2010, 11:12 AM

try this GO TO ATO->Style IMAGES->Images in Posts and remove the line 'background-color: #f3f3f3'
if that doesn't work take a look at http://forum.bytesforall.com/showthr...ht=google+maps

johndh · #3 Feb 27, 2010, 12:18 PM

So far, no good. On my sandbox site, it actually works, and on my main site the link at the bottom of the map shows up. It just wont render the map. I'll have a dig around some of the css setting for the body etc, see if that's causing the issue.

John

johndh · #4 Feb 28, 2010, 02:00 AM

Update 28/2

Tried the map in a text widget on the side bar. Exactly the same result. There have been a lot of people complain about this on google forums. Unfortunately most of these folk are users, not webmasters, so no fix suggestions.

Still working on it. I might have to take the map off, as too many visitors are using IE. Darn it.

johndh · #5 Feb 28, 2010, 03:40 AM

Update: 28/2

This is not the way to do it, but it works until I find the real (correct answer).
Because I noticed that the map would render if I refreshed it, I created a separate dot html page called 'map'. In that page I just put the standard google map iframe code into it. In the head of the page I inserted some script that would force a one time refresh after 1 second. Here is the whole code

Code:

<html>
<head>

<script>
function checkit(){
myvar = location.search.substr(1);
if (myvar=="b"){
}else{
setTimeout("location.href=location.href+'?b'",1000);
}}
window.onload=checkit;
</script>

</head>
<Body> 

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://maps.google.com/maps/ms?hl=en&amp;ie=UTF8&amp;msa=0&amp;msid=104737903513077362845.0004491d3bbdfeb5f76d6&amp;ll=58.392356,-3.249893&amp;spn=0.125955,0.291824&amp;z=11&amp;iwloc=0004491d3f630c68a4234&amp;output=embed"></iframe><br /><small>View <a href="http://maps.google.com/maps/ms?hl=en&amp;ie=UTF8&amp;msa=0&amp;msid=104737903513077362845.0004491d3bbdfeb5f76d6&amp;ll=58.392356,-3.249893&amp;spn=0.125955,0.291824&amp;z=11&amp;iwloc=0004491d3f630c68a4234&amp;source=embed" style="color:#0000FF;text-align:left">Canisp House Bed and Breakfast</a> in a larger map</small>

</body>
</html>

I then call this page into my wordpress content simply by using an iFrame. When the page loads, after 1 second the map refreshes and renders in IE8.

As I mentioned earlier, this is not the correct way, but at least I can show visitors where I am.

BTW, I tried all of the css fixes, and that came to nought. There is something that is conflicting with my particular site that I cant fathom out at the moment. I've heard people mention a bug in IE8, but I don't completely buy into that, as it works fine with my sandbox site.
I am open to any hints, suggestions.

Thanks

John

lmilesw · #6 Feb 28, 2010, 07:19 AM

My preferred method is the MapPress plugin but I have also used the Google Calendar Widget & Short Code plugin. Both with success. The latter converts the iframe to a shortcode as iframes don't play nice in a post or page in my experience.