Google Maps and IE8

johndh · #1 Feb 27, 2010, 11: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, 12:12 PM

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, 01: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, 03: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, 04: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, 08: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.

johndh · #7 Feb 28, 2010, 12:13 PM

Hi lmilesw,

Thanks for those tips. Unfortunately neither are able to do what I want. I have saved maps in google, and its those maps I need to publish. The wordpress plugins don't give the location accurately enough + I need to link to my local business entry via maps. Something plugins wont do.

I am nonetheless grateful for your suggestions. As soon as the next theme ver is out, I believe we can then export/import theme settings, I can then take it apart in my sandbox and find out why this issue arises. I could use an sql query to do that at the moment, but I have already worn my fingers to the first knuckle.

juggledad · #8 Feb 28, 2010, 12:19 PM

If you want to move teh theme, check out http://forum.bytesforall.com/showthr...ghlight=export

johndh · #9 Feb 28, 2010, 02:24 PM

juggledad, your a hero. When I've got to the bottom of this, I'll post back.

Many thanks

John

johndh · #10 Mar 1, 2010, 04:56 AM

Update 01/03

Thanks to juggledad, I was able to set the whole website up very quickly in my sandbox to replicate the problem. Solved! well at least partially. The fact that I had to put in script to refresh the map content after the page loaded was a clue. As I said earlier that CSS was basically ruled out, and I didn't buy into the IE8 bug theory (not completely, it might still be the case), and there was a conflict.

On the right sidebar I have a couple of things going on. I have an Amazon widget, and a 'Trip Advisor' Affiliate widget running. If I disable those one at a time, the conflict continues, but if I disable them both together, the problem is resolved. Now the quest is to find a way of fixing that conflict, but that is now low priority as I was more concerned about my visitors finding me, rather than looking at someone else's products.

The proof:

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

Thanks

John

lmilesw · #11 Mar 1, 2010, 09:24 AM

John,

I am curious as to what the plugins wouldn't do. I put your map on a playground site of mine using the MapPress plugin. While it doesn't take the embed link directly I was able to use latitude and longitude to get the location accurately and their is a setting to put whatever text in the balloon you want. It renders fine for me in IE8. You can take a look here but please excuse the rest of the site. Like I said it is a playground right now.

johndh · #12 Mar 1, 2010, 01:18 PM

Hi lmilesw,

That is a very elegant solution, I'm impressed.

What I needed, and thankfully now have, is the ability for a visitor to put a full travel itinerary together for their Holiday/Vacation. Now set up correctly, when a visitor puts their home town in and the google window opens, they can add all of the points along their journey, and sort them into a logical route by simple drag and drop. Not only that, but they can save the map if they have a google account. What is also very important to me, is the option to leave a review. It has a bearing on the Local Business Listings page rank.

What I was impressed with, is the fact your solution doesn't take the visitor away from your web site. Is there away of doing that, and retain the features mentioned above? I'm willing to learn and revisit the plugins if I can get the full monty, so to speak.

You lat/long is not bad at all, within 180 meters.

The reason I am so adamant, is because we had guests from the USA last year, and asked if I could implement this on my own web site. They also showed me how they use google maps for their travels. I felt somewhat behind the times, especially when they commented that accommodation providers in the UK were not up to speed with this kind of thing. Hopefully I am now.

All the best

John

lmilesw · #13 Mar 1, 2010, 02:21 PM

Unfortunately the plugin doesn't let you add destinations like the large map does but you could add a link in the bubble or underneath the map as I just did.

johndh · #14 Mar 2, 2010, 02:04 AM

lmilesw,

Now that is interesting. I must revisit that plugin. I have a couple of more uses and it might be just what I need.

Thanks

John