PDA

View Full Version : Google Map or JS Error?



bluewalrus
07-21-2011, 04:33 AM
This map loads up for me in safari, chrome, and firefox but in IE it is not loading. Please disregard the error message 'not found' when you load it (future requests will have an address).

http://www.cindyskitchen.com/test/locations.php

I'm not sure if this is a JS error, a google error, or an IE specific issue so any help would be appreciated. I don't see any error messages when I load it in IE, I dont use IE often is there a debugging to in IE? Thanks for any ideas.

bluewalrus
07-31-2011, 05:56 PM
Anyone have any idea on this? I tried the google forum and got no replies there either..

JShor
07-31-2011, 06:55 PM
You're not using the right doctype, so IE refuses to render the HTML5 tags you have there properly.

When I took the map div out of the <section> container, it worked just fine in IE when I tested it.

I tried putting in an HTML5 doctype instead of the XHTML 1.0 doctype that you had, but it did not render the map in any browser.

I suggest redoing your HTML so that it is not HTML5.

traq
07-31-2011, 08:33 PM
I actually don't see a doctype declaration at all; which might be part of IE's problem (Fx also renders it in Quirks mode). Use:
<!DOCTYPE html>
there are also a number of other issues which html5 might not parse correctly. I tried adding the doctype and removing all self-closing tags, which allowed it to pass the html5 validator (even though the self-closing tags are supposedly acceptable in html5, the parser was reading the <script>s that followed your stylesheets as a malformed part of their <link /> tag ( :confused: )). I also moved your html5-enabling script above your stylesheets. all this allowed IE(i'm testing on version 7) to render the page correctly.

Edit: strike all this; it's not correct/relevant. see my edit below.
however, the biggest change seemed to come when I defined address in your searchLocations() function, which would lead me to believe that there's a glitch somewhere in your scripts that is preventing any argument from being passed to the google maps api. It still doesn't display correctly, but I do get a "No locations found near ." alert instead of the more generic "not found" alert.

When I look at the DOM in chrome, I see 8 or 9 iframes with display:none and src="javascript:void(0)", which could be (?) the result of some unintended loop in your javascript (I don't know enough about js to troubleshoot this further).

take a look at my test page (http://custom-anything.com/sand/bluewalrus.html), which renders correctly (but with no map result) in IE.



the map is there, but not visible. I added this to the demo:

/* because the parent container (#home_box) has a content-height of 0,
"height: 60%;" for #map also works out to be 0. change to: */
#map{ height: 256px; }
seems to work in IE as well.

JShor
07-31-2011, 09:16 PM
You're correct, traq. The map isn't visible because he's using HTML5 tags in a non-HTML5 declared webpage.

Although even when I tried testing it using the HTML5 doctype, the Google Map doesn't render in any browser. And I think the solution would work fine, but a more elegant solution is to not use HTML5 at all.

traq
07-31-2011, 09:31 PM
You're correct, traq. The map isn't visible because he's using HTML5 tags in a non-HTML5 declared webpage.

Although even when I tried testing it using the HTML5 doctype, the Google Map doesn't render in any browser. And I think the solution would work fine, but a more elegant solution is to not use HTML5 at all.

see my [ edit ] above and the test page (http://custom-anything.com/sand/bluewalrus.html).
IE didn't like the html5, but once we dealt with that and got into standards mode it became a css problem (IE + other browsers).

however, even if IE were balking at the <section> element, it shouldn't have any effect on the map (unless the javascript relied on it in some way), because IE auto-closes elements it doesn't recognize. So, without the html5 script, IE would render
<section>
<div id="map"></div>
</section>like this instead:
<section></section>
<div id="map"></div>...the needed div is unaffected, since there is no javascript or css that relies on the #map being inside the <section>.

and, in this case, if IE has javascript turned off it won't be able to use the map at all, so it wouldn't matter if it understood the html5 elements.

JShor
07-31-2011, 10:14 PM
Hmm. Well, the map seems to be working in all browsers now.

On a separate note, the font on the navigation ribbon you have is a lot larger on FF than it is on IE, and it's causing the entire menu to overflow.

bluewalrus
08-01-2011, 04:08 AM
This thread is resolved, I don't have an option to mark it as so though.

JShor
08-01-2011, 04:40 AM
Yeah, I had trouble finding that option earlier today, actually. If you edit the parent post of the thread, click on the "Go Advanced" button, you should see a drop-down menu saying "Title Prefix". Then it should give you the option to mark it as "Resolved".

bluewalrus
08-01-2011, 04:43 AM
After a certain time period the option vanishes though, judging by this one not having it I'm guessing it is a week.

JShor
08-01-2011, 04:45 AM
Oh wow, I didn't realize this thread was a week old. I thought it was started today.