?
Solved

Google Maps API and Javascript problem.  It works perfectly in Firefox, WHY NOT Internet Explorer?

Posted on 2008-10-23
9
Medium Priority
?
730 Views
Last Modified: 2013-12-08
I have implemented the Google Maps API and some javascript to create an application that determines product shipping distance using the Google Maps API and displays relevante content in a certain DOM element when the Google Map is refreshed.

Check it out here: http://www.schwebdesign.com/zooktemp/map5.php
Use Firefox first.  It works fine doesn't it?  It does for me.  Firebug and the Web Developer Toolbar show NO javascript, css, or html errors of any kind.  
That's exactly what it's supposed to do.

Using Internet Explorer 7:
The javascript for modifying the DOM element's content still works when the links on the left are clicked.
But the Map itself, calculation of Shipping distance, and display of relevant content in the respective DOM element upon finding shipping distance does not work.  The map doesn't display.

The error i recieve is this:

Line: 4 Char: 9 Error: Object doesn't support this property or method. Code: 0

I'm assuming it's referring to http://www.schwebdesign.com/zooktemp/js/gmaps.js 
Line 4 of gmaps.js contains only this:
            map.enableGoogleBar();


Removing that line does not effect the line of the error or solve the problem.

please check out the source at: http://www.schwebdesign.com/zooktemp/map5.php
linked JS scripts are at: http://www.schwebdesign.com/zooktemp/js/gmaps.js and http://www.schwebdesign.com/zooktemp/js/js.js

Why does this work flawlessly in Firefox yet die in IE?  The code is perfect as far as i can tell.  

Does anyone have any insight in to this?

Please, any advice is greatly greatly appreciated.
0
Comment
Question by:LeftHandedPants
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
9 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22794200
try the following

1. swap

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

2. add DEFER to the scripts

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

0
 

Author Comment

by:LeftHandedPants
ID: 22796929
Thank You Very Much for your suggestion.

I tried what you said and if you check the source you can see that it reflects

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

I also tried:
<script type="text/javascript" defer="defer" src="js/gmaps.js"></script>
<script type="text/javascript" defer="defer" src="js/js.js"></script>

but... the problem persists only in Internet Explorer
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22798090
Then I do not know.

Perhaps try to register the onload using a framework
0
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:LeftHandedPants
ID: 22798349
I'm pretty new to Javascript / AJAX / the Google MAPS API

Could you please give me a few pointers on what you mean by "Perhaps try to register the onload using a framework" ...perhaps a tutorial, or something to read up on with respect to your recommendation.

Thanks,

Does anyone else have any advice or thingsi could try?

0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22801868
I meant this
http://15daysofjquery.com/quicker/4/
but I am no longer so sure that is a better idea. Sorry
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22801870
How about merging the two js files so you know all is loaded at the same time?
0
 

Author Comment

by:LeftHandedPants
ID: 22813692
"How about merging the two js files so you know all is loaded at the same time?"

Nope, sorry, that does not fix the problem.  Problem remains the same.  

Any other ideas?

Is there anyone else reading this thread?

It works perfectly in Firefox with no errors, but not Internet Explorer.  Hmmmm...
0
 

Accepted Solution

by:
LeftHandedPants earned 0 total points
ID: 22818135
okay i have figured it out.   turned out I had a clash of variable names.
 
 I fixed it by renaming the map div DOM element from map to something else.
it works great in Firefox and IE now.

Thanks for all the help i did receive here.  
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
This Micro Tutorial will demonstrate how nuggets on the Web are formatted by using Chrome Developer Tools. These tools would not only view the site's CSS but it can also modify it and save the CSS to use on your own site.
Suggested Courses

765 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question