Google Maps JavaScript API Error In Internet Explorer

Question

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.html

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.

odd that the map loads anyway...

Hamish
– Hamish

2011-01-31 23:50:49 +00:00
Commented Jan 31, 2011 at 23:50 — Hamish
– Hamish, Commented Jan 31, 2011 at 23:50
@Hamish - agreed, the map loads, but the address doesn't.

Fenton
– Fenton

2011-02-01 08:43:44 +00:00
Commented Feb 1, 2011 at 8:43 — Fenton
– Fenton, Commented Feb 1, 2011 at 8:43

Fenton · Accepted Answer · 2011-02-01 09:15:45Z

6

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.

answered Feb 1, 2011 at 9:15

Fenton

253k74 gold badges404 silver badges414 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Hemlock · Accepted Answer · 2011-01-31 23:54:20Z

0

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" });
});

answered Jan 31, 2011 at 23:54

Hemlock

6,2282 gold badges29 silver badges38 bronze badges

Collectives™ on Stack Overflow

Google Maps JavaScript API Error In Internet Explorer

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related