Ben Nadel
On User Experience (UX) Design, JavaScript, ColdFusion, Node.js, Life, and Love.
I am the chief technical officer at InVision App, Inc - a prototyping and collaboration platform for designers, built by designers. I also rock out in JavaScript and ColdFusion 24x7.
Meanwhile on Twitter
Loading latest tweet...
Ben Nadel at the jQuery Conference 2010 (Boston, MA) with:

Google Maps Not Working in Internet Explorer (IE)

By Ben Nadel on

I am working on a page where I have a google-powered map (just like the one you find on maps.google.com. It works just fine in FireFox (of course), but in IE, I am getting a very strange error. The page loads fine, but then just when you think you are in the clear, I get an error that says Could Not Open Page "http://....." page aborted. Then, it jumps from the seemingly fine page to the Page Cannot Be Displayed page. It is so frustrating because the page does not seem to be throwing any Javascript errors. Nothing comes up in the FireFox console, and no little alert icon in IE. And, what's more frustrating is that I do NOT get the alert if I take out a FOR loop that has no content. What's up with that?!?




Reader Comments

Did you solve this problem? i am also suffering with this problem and cant get the cause of this problem?

Please let me know the best solution..

Regards

F

Reply to this Comment

Did you solve this problem? i am also suffering with this problem and cant get the cause of this problem?

Please let me know the best solution..

Regards

F

Reply to this Comment

Fahad,

I have not solved it yet. I sort of gave up and moved on. The map wasn't anything all that important. I hope to come back to it soon though when I get some free time.

Reply to this Comment

Hi

Just worked this one out. IE sometimes has a problem if the map starts loading before the page itself has finished loading. Basically you need to wait until the onload event fires from the page and then build your map.

Put the map initialisation code into a function "myloadmap" and then

<body onload="myloadmap()">

Regards

Toby

Reply to this Comment

Toby, thanks I will check out that solution. It sounds good to me. I sort of gave up on this, but you might have just rekindled the fire :D

Reply to this Comment

I think Toby has the solution. The working example that Google has on their API page has the onLoad in the body tag to do your map dirty work... I wish this weren't the case, as I don't want to have to put the code in there. Does anyone know how to reference the body.onLoad action through another means, say in an on page call? If so, email me. [[[hello ]]at] wes ][ alvaro [dot[[ com]]]

Reply to this Comment

You might be able to use the following to replace your body onload. I did it once, and it worked mostly.
<script type="text/javascript">
window.onload = load();</script>

Reply to this Comment

Thanks, I will try that. I have not worked on this in a while, but I think you are correct in your suggestion. Thanks.

Reply to this Comment

This solution will work for ALL browsers and requires very little effort. I modeled it after this website...
http://simonwillison.net/2004/May/26/addLoadEvent/

Put this entire script inside of your <head> tags.

The reason why this works is it loads the google map information last (even after the body onload event). This works for all browsers. To view a working example of this visit www.sitelinksearch.com and click on a state.

<script type="text/javascript">
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}

//Setup the map
addLoadEvent(function() {
load();
showAddress("raleigh, nc");
})
</script>

Reply to this Comment

I'm having this problem too, it's much faster/easier for me to switch my clients who know nothing about the internet over to firefox. I'm suprised that google hasn't sorted this issue out.

I'm running Vista with IE7 with this error.

Reply to this Comment

@Renato,

You might try adding a slight delay to your ShowAddress() call. Something like:

setTimeout(
function(){
showAddress( ... );
},
500
);

I know it is already waiting for the page to load, but just try it anyway :) I am not sure what it would be fixing, but I have fixed some stuff by adding a slight delay.

Reply to this Comment

Ben!

When everything else fails try putting your init() function in a script block outside the <body>.
It's not pretty but it worked for me when all the other options didn't worked.

Greetz,

Jaime

Reply to this Comment

Here the google map is seen in Mozilla and Google chrome but it is not displayed in internet Explorer

Reply to this Comment

I have a problem that when my website in viewed in internet explorer only part of the map shows up until i resize the browser screen then it snaps into place.
It works fine in firefox.
Any thoughts on what might be wrong?

Reply to this Comment

Also don't forget to validate your HTML. This keeps and gets your Google Maps up and running.

Reply to this Comment

@Lucas,

Hi Lucas, Thanks, you are a real star.
That little code sorted a problem I have been chasing round in circles with for weeks.

Thanks

Adrian

Reply to this Comment

Hi,

I'm having an issue where IE isn't loading markers. It seems to be having a problem with the point var below. When it gets to displayTabbedMarker, IE says that it's looking for an object. Firefox, Chrome etc... all work fine and display the markers. IE says the error occurs at line 40, char 21 in my page, this is the section where I'm extracting the information from the XML file.

I've tried adding timeouts and tried the addLoadEvent function as well, but no joy. I'm pretty sure it's my code but am failing to see the wood for the trees at the moment.

http://girlgeekdinners.webs.com/Native%20Parks/Motorhome_Havens_(2008_-_2009)2.html

Hope someone can help.

Cheers,
Amanda

Reply to this Comment

Thanks Ralph,

I'll look at the XML again when I get home tonight and let you know if it fixes the issue. The XML was the first thing I checked as I know that there are problems when data is missing in tags, but I must've missed one.

Cheers,

Amanda

Reply to this Comment

The tag was indeed the problem. Thought I'd resolved it by putting in the space which Chrome and Firefox handled just fine, IE needs an actual character as a placeholder, which is unfortunate as now the tab will have a point showing, but at least the markers are showing up now. :)

To do list when I get home tonight... stick in some code to handle blank tags should they occur in the future. :)

Thanks for your help.

Cheers,

Amanda

Reply to this Comment

My personal problem for the map not working was that I had another div named "map" which does not work because the google map api div is named "map". I had to rename the other div.

Reply to this Comment

@Ralph,

Thanks for dropping in and helping @Amanda out; rock on :)

@Steven,

Yeah, that will get you every time; what makes that more frustrating is that I think that doesn't actually break in *every* browser (even though it probably should).

Reply to this Comment

I have tried out all the solutions which where posted on top but still i am not able to run the web page with IE.

any solution! it's urgent

Reply to this Comment

@dinesh

IE might be having a problem with using percentages for the width and height of the map.

Ralph

Reply to this Comment

I'm working on a project and am having a similar problem. The page "loads fine" in IE6/7 so long as I don't expect markers to load. Using jquery1.4, easing plugin, maps api 2, extinfowindow, and markerclusterer. Runs beautifully in almost everything except the infowindow is garbled in Opera and markers won't load in IE6/7. Also, to get the map to show in IE6/7 at all, I have to remove the "is gbrowser compatible" if/else statement.

Reply to this Comment

@James

The page has a problem in IE7, because line 112 has a comma at the end.

Line 112 is the first problem, there are many more with the same.

Ralph

Reply to this Comment

Hi

I have a problem with my map on IE, i call the showAddress() to get one marker at the search location, and then try to draw other markers(corresponding to dealers' stores) near this "current location", but on IE 7 the first call to showAddress() takes too long to answer, so when i try to calculate which are the nearest dealers, i have nothing on "Current location" and that is why no dealers are shown.

http://kenda.stg.sbc-adv.com/en/home/DealerSearch.aspx?search=2601&Location=89109

Help, please

Reply to this Comment

Hi

The problem was that i dont take this into consideration:

Potential Pitfalls

1. Be aware that geocoder requests are asyncrhonous. The request is sent to the geocoder and processing continues immediately without waiting for the reply to come back.

Make sure that all the code that operates on the results is placed inside the event handler function.

2. Don't send lots of requests at once. There's a rate limit on the number of geocode requests that you can send per second.

So i move my code inside the "showAddress" function that calls geocoder and thats it.

Reply to this Comment

@Allan

The solution that you have outlined would be true for all browsers, so I can't see how your problem was specific to IE7?

This page's discussion is about how to get IE working with the Google Maps API, not general conceptual mistakes.

Ralph

Reply to this Comment

@Ralph,

Thanks a lot of jumping in and helping everyone on this thread - it's really appreciated!

Reply to this Comment

@Ben Nadel,

Yes thanks! a lot.

but some times internet explorer just don't want to work :-(

Reply to this Comment

@Lucio

:-( all browsers work, but in diffrent ways,

thats, what we are trying to identify in this

post:-)

Ralph

Reply to this Comment

Once again Google maps crashes and is out of action for 4 hours today (8th April 2010) from 12.32pm to 4.32pm . Why will Google never release or publise this ! This happens every few weeks.

The accuracy, sla and support is very poor and no professional would use Google maps for business !

Did you know that Google were refused a UK postcode license ? Maybe they should leaving mapping to specialists like viamichelin or mappy.

Reply to this Comment

@Johny Adams

Websites using the experimental version (2.x) of the API had problems today.

Which is why 2.x is *not* recommended for production sites.

Not an issue for Google, just embarassing for those using the wrong version.

Ralph

Reply to this Comment

@Johny,

It's always shocking when www giants like Google and YouTube have problems. For some reason we just think they are impenetrable to failure. I can't even imagine the kind of pressure they feel :) I don't even bat an eye when I have to restart my production server.

Reply to this Comment

@Lucas, Many thanks for the solution, I was tearing my hair out trying to get my map to disply in IE8, inserted the script and it worked perfectly, life saver, cheers!

Reply to this Comment

@Ben

Google didn't have a problem, it was the users not following the guidelines.

@Tommaso
Not sure about your problem, may you should ask the people who wrote the widget.

Ralph

Reply to this Comment

Thank you Ralph for your reply.
I made the website with Iweb product.
Any idea how to insert a map in my page, adding code of google map to see it also in IE8?
any help is appreciate

Reply to this Comment

@Tommaso
Yes I could add the Google code to your webpage, so that it would work in IE8, but does Iweb allow you to add your own code?

Best regards

Ralph

Reply to this Comment

Hi, I had the following problem using Internet Explorer: After the map had loaded about a third of the screen kept gray instead of the map filling the whole screen (my map's div tag had width and height attributes set to 100%).

To keep it short: I finally realized that the reason for this was not the position of the script in my page or anything suggested here, but simply the fact that my div tag was surrounded by a (deprecated) center tag. After removing that center tag everything worked fine.

So we got another part of the puzzle :-)

Reply to this Comment

Hi Ben

Markers on google map are not all shown in IE browser, whereas in Firefox they are showing up.

can you help me?

Thanks
Pankaj

Reply to this Comment

@Pankaj
Not enough information to help you, post a link to your map.

@Mauro
Not really, Mikes' site has been around for a while and does not help with IE browser issues,
besides, it's all version 2 which is depreciated.

Ralph

Reply to this Comment

I have a map with multiple marker sets so that users can turn on/off the various groups. Was working find in IE and FF a week or so ago. All of a sudden only the first marker set shows up in IE. I thought maybe it was data related so I stripped the script down to load test data only. I have rearranged the code and cleaned up the HTML in case that was the issue. Nothing has helped. If you try it in FF you can toggle the different groups (one address right now, but one record for each group). If you look in IE you'll only see the first group is loaded.

Any ideas?

Link: http://outcom.simplehelix.com/don-aero/global-presence

Reply to this Comment

I am implemented gooogle map on my site. It works fine on all browsers. only in ie6 it displays blank all other ie version it working fine. I cant understand what is the problem.

Reply to this Comment

@all

Just use this, works fine for me in every browser.

$(document).ready(
function()
{
// google maps api code goes here
});

Reply to this Comment

Help...

Infowindow in IE 8 No Working...

  • google.maps.event.addListener(marker, "click", function(e) {
  • showVenueInfo(marker.venue_id, marker.getPosition(), marker);
  • });

Why???

Reply to this Comment

@Sumalatan

Try removing all the console.log lines, like this one.

console.log('start refresh' + n, venue_id);

Ralph

Reply to this Comment

I hate it when you are using a site, and it works fine, and then they change it on you, and the new version does not work at all or does not work the way you expect it to. Mapquest is an example of this. I used to use it all the time, and it worked fine, but the new "updates" they did to it make it very difficult to use. Usability of that site has gone completely down the toilet (in my opinion). There are others.

Reply to this Comment

Map not working properly in IE, loading slow. Have reviewed comments but can't really decipher the solution. You can view the page here:
http://chetest.iu.edu/cln/CLN-Web/WEB/CLN/cln_redesign_test/contact.html

The page's HTML validates.

Let me know if anyone has anything they can offer!

Reply to this Comment

Anna, I see that your map is now loading placemarks in IE9... what did you do to fix the problem? Can you take a look at my page here:

http://chetest.iu.edu/cln/CLN-Web/WEB/CLN/cln_redesign_test/contact.html

Thanks so much!

Reply to this Comment

hi all..!

My google map not working on the "contact us" slide here in IE8.

It works fine when theres no slide/javascript in IE, but client wants this slide thing!

http://www.bluecrushdesign.co.za/imagin8

Could anyone help?

Reply to this Comment

Hello everyone! I just solved this issue, and this thread was very helpful (thanks in no small part to Ralph's persistence & expertise!) but I wanted to throw in my experience.

After I had ensured it wasn't my HTML, script placement or the various loading techniques I was trying, I enabled Script Debugging on IE to see if I could nail down the problem. [Tools -> Internet Options -> Advanced -> Browsing -> [ ] Disable script debugging (Internet Explorer)]

Then, while diving through the errors, I found the culprit.

Any time I had initialized a google map Object that had options attached, my code looked like this:

  • var something = new google.maps.Something({
  • x: "x",
  • y: "y"<strong>,</strong>
  • });

Note the trailing comma after "y"! The code ran perfectly in Chrome and Firefox, but Internet Explorer wouldn't process any of my objects until I deleted every last trailing comma. After that, it worked like a charm!

Hope this helps. Cheers all.

-Ross

Reply to this Comment

I have resolved the google map issue, it was not working on ie. Please click on below link

http://bhupendra-kanojiya.blogspot.in/2012/08/resolve-google-maps-api-ssl-secuirty.html

Reply to this Comment

Hi guys,

My markers would not show in IE 7 but would display fine in all other browsers (I'm using JSON to grab the markers data) and after browsing this thread with no luck I discovered what was wrong with mine. I was using JSON.parse which internet explorer did not understand.

Solution:

Go to the following link and add in JSON2 to make sure it's consistent along all browsers:

1) https://github.com/douglascrockford/JSON-js/blob/master/json2.js

2) Copy and paste that into a .js file

3) save and import into your HTML page:

<script src="nameofjson2file.js" type="text/javascript"></script>

Hope this helps!

Thanks for commenting in the thread everyone!

Luke.

Reply to this Comment

Hi all, I have the following code which works in all browsers except for IE.

Can someone please check?

<!DOCTYPE html>

<HTML>

<head>
<meta charset="UTF-8">
<title>FX mapping</title>
<style type="text/css">
body {
font-family: Arial;
text-align: center;
}
</style>
</head>

<body>

<iframe width="910" height="550" style="overflow:hidden;border:none;" src="https://www.google.com/fusiontables/embedviz?viz=MAP&amp;q=select+col0%3E%3E1+from%20+1Cq1RxHFVSVCLSggbeLslCxxvIs0tVqpgYAMlS7A&amp;h=false&amp;lat=23.469060937006283&amp;lng=31.640625&amp;z=2&amp;t=1&amp;l=col0%3E%3E1&amp;y=1&amp;tmplt=1">

</iframe>

</body>

</html>

Reply to this Comment

I have googlemaps showing maps of pune and mumbai. Its working fine with chrome and FF. But on explorer pune map work fine but mumbai map do not get displayed. Please help me out.

Reply to this Comment

Post A Comment

?
You — Get Out Of My Dreams, Get Into My Comments
Live in the Now
Oops!
Comment Etiquette: Please do not post spam. Please keep the comments on-topic. Please do not post unrelated questions or large chunks of code. And, above all, please be nice to each other - we're trying to have a good conversation here.