Google Maps JavaScript API Error In Internet Explorer

I have written a really simple jQuery Plugin for the Google Maps JavaScript API v3.

It is working in Firefox, Chrome (et al), but not Internet Explorer 8.

The error I get is "Object Doesn't Support This Property or Method" on the following line...

map = new google.maps.Map(mapContainer, myOptions);

I have put a working example page online to demonstrate... I'm attempting to get Buckingham Palace! You can see the code behind in the jquery.simplemap.js file, it isn't minified.

http://www.stevefenton.co.uk/cmsfiles/assets/File/simplemap.htm开发者_Python百科l

Any help would be much appreciated.

UPDATE

I have done a detailed debug through this code and it actually errors inside the Google code, which is heavily minified and entirely illegible - this is why the map loads, as the error is after the map is initialized. I will post more when I know it.

UPDATE2

I have re-ordered various things in the plugin, which results in getting the map to show the correct location, but because of the error that occurs deep in the Google Maps API when the map is initialised, I cannot add the marker or callout.

Okay, I have found a solution to this problem.

The error raised from inside the Google Maps API is caused by the scope of the variable being used to store the map. All of the examples for the API use something like this...

map = new google.maps.Map(mapContainer, myOptions);

Note that "map" is one of these wonderful mystery-scope variables... and I'm running all of this code inside of my jQuery Plugin - so the end result is that the Google Maps API cannot get a handle on the map variable.

By declaring map as a Global variable, Google Maps API can access it and everything magically starts working perfectly.

So the fix is to declare...

var map;

In the Global scope, so the API can get to it.

I think it's just a matter of timing. Try making this call from the html:

$("#map").simplemap({ search: "Buckingham Palace, London", description: "Buckingham Palace,<br>London" });

on ready:

$.ready(function() {
  $("#map").simplemap({ search: "Buckingham Palace, London", description: "Buckingham Palace,<br>London" });
});