Another Google Map Topic

[danielbone1]

So I have a custom google map with tabbed info windows up and running on my CMSMS site, but only in FF.

Of course there is a problem with IE.  Why wouldn't there be.  I have tried almost every hack to get this working from the google maps group but no help.

It seems that IE can't handle rendering the map before the entire page has loaded, and one of the solutions is
putting the javascript in the head and then using an onLoad to call it in the body.  When I try this I get a smarty error.

Anyway I am just throwing this out there to see if anyone has effectively gotten around this problem and has
a suggestion for me.

I'll post the link to the page so you can view the source code.

http://www.exceptions.com/index.php?page=directions

Thanks,
Dan

[martin42]

It seems that IE can't handle rendering the map before the entire page has loaded, and one of the solutions is
putting the javascript in the head and then using an onLoad to call it in the body.  When I try this I get a smarty error.

I had this exact problem.  I fixed it by having the map DIV appear first, and moving the {content} CMSMS output right down the bottom of the HTML body. Why that works I can't remember!

http://www.imba.org.uk/index.php?page=M ... nge_Trails

Code: Select all

</__body>
<div id="top">  
         - banner image... -
</div>
<div class="leftsidebar"> 
         {cms_module module='cssmenu'}
</div>
<div class="thebody">
     - some headings -
    <div id="map" style="height:700px">
    </div>
     - some trailings - 
</div>
{content}
<__body>
</__html>

The CSS style for div.thebody sets "z-index:1", while div.leftsidebar sets "z-index:9999" so that the CSS Menus appear above the map, not below it.

In the HeadTags part of the CMSMS page, I have a user-defined tag to spit out the tag to fetch Google's code with my map API key.

I'm not using OnLoad.

It all seems to work on FF, IE and Opera.  My only gripe is that I'd really like to set the map height and width according to what space the user has on his screen after we've lost some space for the left CSS Menu and the page header and trailer.  But the only way I can get it to work at all is to force the map DIV height to be a reasonable value (700 pixels) and not set the width.  This isn't too bad: the map width is set automatically, but annoyingly something makes the browser think the page is wider than it is, resulting in the horizontal scroll bar appearing: there's a blank area off-screen to the right of the map, suspiciously similar in width to my left CSS menu area.  But if I try to tweak the width then the map disappears 

BTW, I've recently upgraded to the Google Maps 2 API.  Fairly painless really, and the mapping's better.  Rather more of mainland Europe is now included.

Good luck!

[danielbone1]

Thanks for the replies guys.  I have been away for the weekend so I will have the chance to get back on this
sometime tomorrow. 

I'll let you know how it goes.

Dan

[okparrothead]

DanielBone1,

I just looked at the code for http://www.exceptions.com/index.php?pag ... tions  via FireFox, and saw what I think is nested tags.

Would this cause the problem?

Peace,

[danielbone1]

Thanks to all that helped out.  I tried a little bit of everything when working on it.

I did have the nested body tags and never even noticed it. 
I also moved the content outside of the divs and now IE renders the map after the page loads.

Now I have a bunch of coding to clean up and it will be nice.

Thanks again everyone,

Dan

[martin42]

I recommend testing on MSIE, Firefox, Opera and Safari.

If you don't have Safari (Apple Mac) post the URL and I'll test it 

I just noticed after 1 year that one of my two maps (with identical CSS) doesn't render properly on Safari.  Mysteriously, clicking on the hot spots on the map pulls up the wrong info.  I'll post the outcome here when I've debugged it, if it looks useful for anyone else.