Google Maps API and YUI don't live together?

[venicewiki]

Hi!

In our wiki we are using the Header Tabs extension for Mediawiki. This
extension transforms top-level MediaWiki headers into tabs using
Yahoo! YUI library (http://www.mediawiki.org/wiki/Extension:Header_Tabs).

It works pretty well but there's a problem between YUI and Google Maps
API:
Google Maps loaded in tabs are not centered correctly. The first time
the page is loaded, the marker is hidden on the top-left corner. By
reloading the page, the map is centered correctly on the marker. Same
issue with both Semantic Maps and Google Maps extensions. Example here:

http://www.venicewiki.org/wiki/Fotografo_test

Click on "Mappa" tab and scrolling the map you'll find that the marker
is hidden on (0,0) position. Click on "Voce" to reload the page and
this time the map is centered correctly!

The author of the extension says that it looks like Google Maps API
and YUI don't live together. Any similar experiences or suggestions?

Thanks,
VW

[Eric Miraglia]

VW,

I didn't see the problem on the venicewiki site -- I don't see a Mappa  
tab.

That said, it's possible that what you're seeing here is that Google  
Maps doesn't like to be loaded into an element with display set to  
none (as is the case in YUI TabView hidden tabs).

Do you have the same problem if you render the map into the visible  
tab or render the map only after its tab becomes visible?

-Eric


On Jul 4, 2008, at 8:43 AM, venicewiki wrote:

> Hi!
>
> In our wiki we are using the Header Tabs extension for Mediawiki. This
> extension transforms top-level MediaWiki headers into tabs using
> Yahoo! YUI library (http://www.mediawiki.org/wiki/Extension:Header_Tabs 
> ).
>
> It works pretty well but there's a problem between YUI and Google Maps
> API:
> Google Maps loaded in tabs are not centered correctly. The first time
> the page is loaded, the marker is hidden on the top-left corner. By
> reloading the page, the map is centered correctly on the marker. Same
> issue with both Semantic Maps and Google Maps extensions. Example  
> here:
>
> http://www.venicewiki.org/wiki/Fotografo_test
>
> Click on "Mappa" tab and scrolling the map you'll find that the marker
> is hidden on (0,0) position. Click on "Voce" to reload the page and
> this time the map is centered correctly!
>
> The author of the extension says that it looks like Google Maps API
> and YUI don't live together. Any similar experiences or suggestions?
>
> Thanks,
> VW
>
>
>

[Sergey Chernyshev-2]

Hi Eric,

I'm the developer of Header Tabs extension for MediaWiki and hope to
help with this trouble users are having integrating Google Maps with
Tabview.

You can see an example of YUI (Header Tabs) being used with Google
Maps widget here:
http://www.mediawikiwidgets.org/SandBox/YUI_and_Google_Maps#tab=Google_Map_tab

As you noticed I also suspect Google Maps not liking to be loaded in
"display:none" divs, but I'm not positive about it.

I'd appreciate if you'll take a look at the page and see what might be
triggering the error as moving code earlier to lower tabs sometimes
produces fine result and I suspect that it might be some loading stage
of YUI that triggers the error on Google's end. You can edit wiki page
to move stuff around (essentially, first level wiki headers are
conversted to tabs so you just move map code up or down).

I will really appreciate your help in this matter even if errors are
on Google's side of things.

And, I almost forgot - thanks a lot for such a great tool as YUI
Framework and tabs specifically!

Thank you,

      Sergey



--- In ydn-javascript@..., Eric Miraglia <miraglia@...> wrote:

>
> VW,
>
> I didn't see the problem on the venicewiki site -- I don't see a Mappa  
> tab.
>
> That said, it's possible that what you're seeing here is that Google  
> Maps doesn't like to be loaded into an element with display set to  
> none (as is the case in YUI TabView hidden tabs).
>
> Do you have the same problem if you render the map into the visible  
> tab or render the map only after its tab becomes visible?
>
> -Eric
>
>
> On Jul 4, 2008, at 8:43 AM, venicewiki wrote:
>
> > Hi!
> >
> > In our wiki we are using the Header Tabs extension for Mediawiki. This
> > extension transforms top-level MediaWiki headers into tabs using
> > Yahoo! YUI library

(http://www.mediawiki.org/wiki/Extension:Header_Tabs 

> > ).
> >
> > It works pretty well but there's a problem between YUI and Google Maps
> > API:
> > Google Maps loaded in tabs are not centered correctly. The first time
> > the page is loaded, the marker is hidden on the top-left corner. By
> > reloading the page, the map is centered correctly on the marker. Same
> > issue with both Semantic Maps and Google Maps extensions. Example  
> > here:
> >
> > http://www.venicewiki.org/wiki/Fotografo_test
> >
> > Click on "Mappa" tab and scrolling the map you'll find that the marker
> > is hidden on (0,0) position. Click on "Voce" to reload the page and
> > this time the map is centered correctly!
> >
> > The author of the extension says that it looks like Google Maps API
> > and YUI don't live together. Any similar experiences or suggestions?
> >
> > Thanks,
> > VW
> >
> >
> >
>

[Sergey Chernyshev-2]

OK, it was, indeed a problem with Google Maps when created without
specifying the size was freaking out on zero-size div and needed
refresh upon showing or just size sent during creation.

I updated my Google Maps widget to work properly and will help other
developers of MediaWiki extensions update their code.

         Sergey


--- In ydn-javascript@..., "sergeychernyshev"
<sergey.chernyshev@...> wrote:

>
> Hi Eric,
>
> I'm the developer of Header Tabs extension for MediaWiki and hope to
> help with this trouble users are having integrating Google Maps with
> Tabview.
>
> You can see an example of YUI (Header Tabs) being used with Google
> Maps widget here:
>

http://www.mediawikiwidgets.org/SandBox/YUI_and_Google_Maps#tab=Google_Map_tab

>
> As you noticed I also suspect Google Maps not liking to be loaded in
> "display:none" divs, but I'm not positive about it.
>
> I'd appreciate if you'll take a look at the page and see what might be
> triggering the error as moving code earlier to lower tabs sometimes
> produces fine result and I suspect that it might be some loading stage
> of YUI that triggers the error on Google's end. You can edit wiki page
> to move stuff around (essentially, first level wiki headers are
> conversted to tabs so you just move map code up or down).
>
> I will really appreciate your help in this matter even if errors are
> on Google's side of things.
>
> And, I almost forgot - thanks a lot for such a great tool as YUI
> Framework and tabs specifically!
>
> Thank you,
>
>       Sergey
>
>
>
> --- In ydn-javascript@..., Eric Miraglia <miraglia@> wrote:
> >
> > VW,
> >
> > I didn't see the problem on the venicewiki site -- I don't see a

Mappa  

> > tab.
> >
> > That said, it's possible that what you're seeing here is that Google  
> > Maps doesn't like to be loaded into an element with display set to  
> > none (as is the case in YUI TabView hidden tabs).
> >
> > Do you have the same problem if you render the map into the visible  
> > tab or render the map only after its tab becomes visible?
> >
> > -Eric
> >
> >
> > On Jul 4, 2008, at 8:43 AM, venicewiki wrote:
> >
> > > Hi!
> > >
> > > In our wiki we are using the Header Tabs extension for

Mediawiki. This
> > > extension transforms top-level MediaWiki headers into tabs using
> > > Yahoo! YUI library
> (http://www.mediawiki.org/wiki/Extension:Header_Tabs 
> > > ).
> > >
> > > It works pretty well but there's a problem between YUI and
Google Maps
> > > API:
> > > Google Maps loaded in tabs are not centered correctly. The first
time
> > > the page is loaded, the marker is hidden on the top-left corner. By
> > > reloading the page, the map is centered correctly on the marker.
Same
> > > issue with both Semantic Maps and Google Maps extensions. Example  
> > > here:
> > >
> > > http://www.venicewiki.org/wiki/Fotografo_test
> > >
> > > Click on "Mappa" tab and scrolling the map you'll find that the
marker

> > > is hidden on (0,0) position. Click on "Voce" to reload the page and
> > > this time the map is centered correctly!
> > >
> > > The author of the extension says that it looks like Google Maps API
> > > and YUI don't live together. Any similar experiences or suggestions?
> > >
> > > Thanks,
> > > VW
> > >
> > >
> > >
> >
>

[jacob.fogg]

I have seen similar issues with Google maps and a custom accordion
widget that I created... Google Maps does indeed not like
Display:none;  I considered submitting a bug report, but I figured
there is a good chance that it's intentional.

My quick solution was to make sure the Google map was expended by
default. Wouldn't mind putting some effort into a better solution though.

What is your method of "refreshing upon showing"?

Jacob Fogg


--- In ydn-javascript@..., "sergeychernyshev"
<sergey.chernyshev@...> wrote:

>
> OK, it was, indeed a problem with Google Maps when created without
> specifying the size was freaking out on zero-size div and needed
> refresh upon showing or just size sent during creation.
>
> I updated my Google Maps widget to work properly and will help other
> developers of MediaWiki extensions update their code.
>
>          Sergey
>
>
> --- In ydn-javascript@..., "sergeychernyshev"
> <sergey.chernyshev@> wrote:
> >
> > Hi Eric,
> >
> > I'm the developer of Header Tabs extension for MediaWiki and hope to
> > help with this trouble users are having integrating Google Maps with
> > Tabview.
> >
> > You can see an example of YUI (Header Tabs) being used with Google
> > Maps widget here:
> >
>

http://www.mediawikiwidgets.org/SandBox/YUI_and_Google_Maps#tab=Google_Map_tab

> >
> > As you noticed I also suspect Google Maps not liking to be loaded in
> > "display:none" divs, but I'm not positive about it.
> >
> > I'd appreciate if you'll take a look at the page and see what might be
> > triggering the error as moving code earlier to lower tabs sometimes
> > produces fine result and I suspect that it might be some loading stage
> > of YUI that triggers the error on Google's end. You can edit wiki page
> > to move stuff around (essentially, first level wiki headers are
> > conversted to tabs so you just move map code up or down).
> >
> > I will really appreciate your help in this matter even if errors are
> > on Google's side of things.
> >
> > And, I almost forgot - thanks a lot for such a great tool as YUI
> > Framework and tabs specifically!
> >
> > Thank you,
> >
> >       Sergey
> >
> >
> >
> > --- In ydn-javascript@..., Eric Miraglia <miraglia@>

wrote:
> > >
> > > VW,
> > >
> > > I didn't see the problem on the venicewiki site -- I don't see a
> Mappa  
> > > tab.
> > >
> > > That said, it's possible that what you're seeing here is that
Google  
> > > Maps doesn't like to be loaded into an element with display set to  
> > > none (as is the case in YUI TabView hidden tabs).
> > >
> > > Do you have the same problem if you render the map into the
visible  

> > > tab or render the map only after its tab becomes visible?
> > >
> > > -Eric
> > >
> > >
> > > On Jul 4, 2008, at 8:43 AM, venicewiki wrote:
> > >
> > > > Hi!
> > > >
> > > > In our wiki we are using the Header Tabs extension for
> Mediawiki. This
> > > > extension transforms top-level MediaWiki headers into tabs using
> > > > Yahoo! YUI library
> > (http://www.mediawiki.org/wiki/Extension:Header_Tabs 
> > > > ).
> > > >
> > > > It works pretty well but there's a problem between YUI and
> Google Maps
> > > > API:
> > > > Google Maps loaded in tabs are not centered correctly. The first
> time
> > > > the page is loaded, the marker is hidden on the top-left

corner. By
> > > > reloading the page, the map is centered correctly on the marker.
> Same
> > > > issue with both Semantic Maps and Google Maps extensions.
Example  
> > > > here:
> > > >
> > > > http://www.venicewiki.org/wiki/Fotografo_test
> > > >
> > > > Click on "Mappa" tab and scrolling the map you'll find that the
> marker
> > > > is hidden on (0,0) position. Click on "Voce" to reload the
page and
> > > > this time the map is centered correctly!
> > > >
> > > > The author of the extension says that it looks like Google
Maps API
> > > > and YUI don't live together. Any similar experiences or
suggestions?
> > > >
> > > > Thanks,
> > > > VW
> > > >
> > > >
> > > >
> > >
> >
>

[Sergey Chernyshev-2]

I think Eric mentioned checkRefresh() method.



On 7/21/08, jacob.fogg <jacob.fogg@...> wrote:

> I have seen similar issues with Google maps and a custom accordion
> widget that I created... Google Maps does indeed not like
> Display:none;  I considered submitting a bug report, but I figured
> there is a good chance that it's intentional.
>
> My quick solution was to make sure the Google map was expended by
> default. Wouldn't mind putting some effort into a better solution though.
>
> What is your method of "refreshing upon showing"?
>
> Jacob Fogg
>
>
> --- In ydn-javascript@..., "sergeychernyshev"
> <sergey.chernyshev@...> wrote:
>>
>> OK, it was, indeed a problem with Google Maps when created without
>> specifying the size was freaking out on zero-size div and needed
>> refresh upon showing or just size sent during creation.
>>
>> I updated my Google Maps widget to work properly and will help other
>> developers of MediaWiki extensions update their code.
>>
>>          Sergey
>>
>>
>> --- In ydn-javascript@..., "sergeychernyshev"
>> <sergey.chernyshev@> wrote:
>> >
>> > Hi Eric,
>> >
>> > I'm the developer of Header Tabs extension for MediaWiki and hope to
>> > help with this trouble users are having integrating Google Maps with
>> > Tabview.
>> >
>> > You can see an example of YUI (Header Tabs) being used with Google
>> > Maps widget here:
>> >
>>
> http://www.mediawikiwidgets.org/SandBox/YUI_and_Google_Maps#tab=Google_Map_tab
>> >
>> > As you noticed I also suspect Google Maps not liking to be loaded in
>> > "display:none" divs, but I'm not positive about it.
>> >
>> > I'd appreciate if you'll take a look at the page and see what might be
>> > triggering the error as moving code earlier to lower tabs sometimes
>> > produces fine result and I suspect that it might be some loading stage
>> > of YUI that triggers the error on Google's end. You can edit wiki page
>> > to move stuff around (essentially, first level wiki headers are
>> > conversted to tabs so you just move map code up or down).
>> >
>> > I will really appreciate your help in this matter even if errors are
>> > on Google's side of things.
>> >
>> > And, I almost forgot - thanks a lot for such a great tool as YUI
>> > Framework and tabs specifically!
>> >
>> > Thank you,
>> >
>> >       Sergey
>> >
>> >
>> >
>> > --- In ydn-javascript@..., Eric Miraglia <miraglia@>
> wrote:
>> > >
>> > > VW,
>> > >
>> > > I didn't see the problem on the venicewiki site -- I don't see a
>> Mappa
>> > > tab.
>> > >
>> > > That said, it's possible that what you're seeing here is that
> Google
>> > > Maps doesn't like to be loaded into an element with display set to
>> > > none (as is the case in YUI TabView hidden tabs).
>> > >
>> > > Do you have the same problem if you render the map into the
> visible
>> > > tab or render the map only after its tab becomes visible?
>> > >
>> > > -Eric
>> > >
>> > >
>> > > On Jul 4, 2008, at 8:43 AM, venicewiki wrote:
>> > >
>> > > > Hi!
>> > > >
>> > > > In our wiki we are using the Header Tabs extension for
>> Mediawiki. This
>> > > > extension transforms top-level MediaWiki headers into tabs using
>> > > > Yahoo! YUI library
>> > (http://www.mediawiki.org/wiki/Extension:Header_Tabs
>> > > > ).
>> > > >
>> > > > It works pretty well but there's a problem between YUI and
>> Google Maps
>> > > > API:
>> > > > Google Maps loaded in tabs are not centered correctly. The first
>> time
>> > > > the page is loaded, the marker is hidden on the top-left
> corner. By
>> > > > reloading the page, the map is centered correctly on the marker.
>> Same
>> > > > issue with both Semantic Maps and Google Maps extensions.
> Example
>> > > > here:
>> > > >
>> > > > http://www.venicewiki.org/wiki/Fotografo_test
>> > > >
>> > > > Click on "Mappa" tab and scrolling the map you'll find that the
>> marker
>> > > > is hidden on (0,0) position. Click on "Voce" to reload the
> page and
>> > > > this time the map is centered correctly!
>> > > >
>> > > > The author of the extension says that it looks like Google
> Maps API
>> > > > and YUI don't live together. Any similar experiences or
> suggestions?
>> > > >
>> > > > Thanks,
>> > > > VW
>> > > >
>> > > >
>> > > >
>> > >
>> >
>>
>
>
>

--
Sent from Gmail for mobile | mobile.google.com

Sergey Chernyshev
http://www.sergeychernyshev.com/

[Sergey Chernyshev-2]

Actually it wasn't Eric as he works for Yahoo!, not Google ;)

And method is called GMap2.checkResize() - check it out here (down
below, last in "Modify the Map State" section):
http://code.google.com/apis/maps/documentation/reference.html#GMap2

Hope this helps with your problem.

      Sergey


--- In ydn-javascript@..., "Sergey Chernyshev"
<sergey.chernyshev@...> wrote:

>
> I think Eric mentioned checkRefresh() method.
>
>
>
> On 7/21/08, jacob.fogg <jacob.fogg@...> wrote:
> > I have seen similar issues with Google maps and a custom accordion
> > widget that I created... Google Maps does indeed not like
> > Display:none;  I considered submitting a bug report, but I figured
> > there is a good chance that it's intentional.
> >
> > My quick solution was to make sure the Google map was expended by
> > default. Wouldn't mind putting some effort into a better solution

though.
> >
> > What is your method of "refreshing upon showing"?
> >
> > Jacob Fogg