Google Maps + Jquery: Marker bug in IE

Question

I was hoping someone could shed some light on this.

I have a jquery-based web application I'm building. The application has a page that it loads, then generates a Google map on the loaded page once the ajax call is complete.

My problem is that the marker 'bubbles' don't render correctly in IE7 or IE6 (screenshots provided). They are fine in Firefox (inevitably).

Pics: IE

This problem does not exist when the google map is generated upon a static page.

I'm sure I can figure out a workaround to calling the page dynamically, however, for the sake of any further GMap development that involved ajax, I --really-- need to know what precisely is going wrong here, and if it's possible to fix it.

My best guess is that the ajax call is somehow messing with the directory filepath that IE's fx.filter is using for transparencies. I can't see anything in the code that could fix this however.

Any advice would be greatly appreciated.

• Daniel

Answer 1

I've attempted setting the scripts into noConflict mode. No effect there.

I've also tried putting the requested page on the same directory level; again, no effect.

The bug occurs if 'any' ajax load() is called prior to google map being called. My current workaround is to call the map on the web app's default window and make it invisible via CSS. This is --not-- ideal.

Anyone else got any ideas?

-Daniel

Answer 2

I've never used the gmap api so I can't provide any direct advice. What I can do is ask you some debugging questions since I've had my share of these types of platform issues.

• Does this happen with all markers or just some?
• What if you only create one marker?
• Is the map entirely loaded before you start creating markers? Is there a callback for this event?
• Is there a callback that is fired after a marker is created? If so, are you using that to queue the creation of markers?

I know running down a list of questions like these helps me from time to time. Hope it helps.

Answer 3

Solved this a couple of weeks ago - I thought that people might appreciate a solution.

The problem was actually fairly easy to diagnose with a bit of proper detective work (thanks for the encouragement there, Justin). I went through the sequence of events, disabling all in turn, and found it wasn't anything to do with the ajax call.

The problem was actually the jQuery animate function - the opacity fade I set on the content div was messing with the Google maps transparencies in IE.

I'm betting money this is a common bug.

Thanks to those who replied.