Sunday, January 20, 2008

Is it JavaScript, Google Maps or MS IE problem?

I was fighting on Friday with JavaScript portability between Firefox and MSIE (I had the same problem with version 6 and 7).

In the picture you can see a web page with a Google Map on it and with custom component on the Google Map. The component is just an image with navigation controls (one image) with <MAP> element that, let's say, handles mouse clicks and invokes relevant method (big simplification, I know - don't swear on me).
We decided to make it a Google Map component to make the JS code more readable and maintainable. The other option would be to put our navigation control in a <DIV> element directly in the main web page on top of the Google Map <DIV>. But then our code would be somewhat ugly and more difficult to maintain.

Our idea worked great! More so, it was well coded :) - each component was different class in separate class file (JS class).

Unfortunately what we did wrong is that we forgot to check how it works under MSIE. Guess what?

...

It didn't!

Although it looked the same and seemed to be OK the events after mouse clicks on the image <MAP> were not triggered. It seems that it is a bug of Google Map or MSIE or both.

Our quick solution-workaround was just to put our navigation stuff directly on the Google Map as separate HTML elements instead of using Google Map components.

Now it works on both Firefox and MSIE but our code smells...

No comments: