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:

HTML Code:

<!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 (

)). 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, which renders correctly (but with no map result) in IE.

Edit:

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

Code:

/* 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

Originally Posted by JShor

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

HTML Code:

<section>
   <div id="map"></div>
</section>

like this instead:

HTML Code:

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