Re: infoWindow content arrives a little late

Thanks for the idea Martin

Actually I don't need to do that because I create the html string from
the data for the station in js and the data is in a js array, (there
is no XML involved). If I see there is a photo, then I create the
appropriate <div ...>, <img ...> etc. so I know when I need to use an
<img ...> element, and when not to.

If you look at mys source, this is all done in the function "addStation
(....)". So I have full control ober that, I just don't know how big
the photos are. I set the width to be fixed (either 150 or 400 px)
and let the height vary based on the aspect ratio.

I may go back and add the aspect ratio to my data and pre-set the
<div...> width and height as was suggested in the first response
above. This is doable now, with just 20 or so photos, but I was
trying to avoid this since the number of photos will increase and such
manual steps are error prone and basically a pain. So I may write
something to pre-process the data.

But at the moment, I'm past that using the <img onload="..." ...>
capability together with the map.updateInfoWindow() call. That works
(sort of) but it doesn't look good since the infoWindow, flickers, or
it changes from a photo sticking out past the bottom, into a proper
infoWindow before your eyes.

Hence the attempt to use the getInfoWindo().hide() and .show() to keep
that crap out of view.

Still working on it.

On Oct 28, 2:10 am, Martin <warwo...@gmail.com> wrote:
> Can you use a regular expression to check your 'htmltext' for an IMG
> element string?
>
> If you find an IMG element then:
>
> Use a regular expression to retrieve it's href attribute.
>
> Create a new image object, set it's onload event to open the
> infowindow and set it's src to the href.
>
> If htmltext contains no IMG element then just open the infowindow.
>
> Martin.
>
> If your regular expressions leave something to be desired (sounds like
> me!) then you could look for the IMG element string and theh href
> attribute using indexOf().
>
> On 27 Oct, 19:11, Papa Bear <papabear.newy...@gmail.com> wrote:
>
> > OK
>
> > I didn't look in the documentation very thoroughly.   I found the 2
> > methods:
>
> > map.getInfoWindow().hide()
> > map.getInfoWindow().show()
>
> > Just what I wanted?  Not quite
>
> > There seems to be a timing problem:  I want the window to be hidden
> > when it's opened and only exposed after the images are loaded.  This
> > didn't work:
>
> > map.getInfoWindow().hide()
> > marker.openInfoWindow(...)
>
> > You cant "pre-hide" the infoWindow object.  The open seems to change
> > the hidden state to the visible state.
>
> > This didn't work:
>
> > marker.openInfoWindow(...)
> > map.getInfoWindow().hide()
>
> > It's too quick, the window is not completed so the hide() is too soon.
>
> > This worked
> > marker.openInfoWindow(...)
> > setTimeout("map.getInfoWindow().hide()",50)
>
> > But of course now we are back to the flickers
>
> > Any way to bring it up in the hidden state?  The subject of this
> > thread is morphing, sorry.  Thanks.
>
> > On Oct 27, 12:02 pm, Papa Bear <papabear.newy...@gmail.com> wrote:
>
> > > I discovered that the HTML within the infoWindow does support the
> > > unload=..." option for the <img ... directive.
> > > So now my <img ..." directive is
>
> > > <img onload="map.updateInfoWindow()" ...>
>
> > > And this works.
>
> > > However, never one to be satisfied, I now notice that after the photo
> > > loads, the infoWindow flickers.  Of course, we knew that would happen.
>
> > > So ...
>
> > > Is there any way to hide the infoWindow and the display it only the
> > > photo is loaded.  In other words change the openInfoWindo in the
> > > marker's event listener to the hypothetical
>
> > > marker.openInfoWindowHtml(htmltext,{hide:true});
>
> > > And add the following (hypothetical) statement to the onload property
> > > for the <img... in the infoWindow
>
> > > <img onload="map.updateInfoWindow();map.showInfoWindow()" ...>
>
> > > Obviously I can't defer the openInfoWindow (which happen in the even
> > > listener for the marker) since then nothing would be loaded, text or
> > > photo, since the openInfoWindow starts the interpretation of the HTML
> > > in the first place.  Since the iinfoWindow is an overlay, one must be
> > > able to hide and show it.
>
> > > In other words, I want to hide the thing until all the content is
> > > ready.
>
> > > Thanks
>
> > > On Oct 27, 3:54 am, Martin <warwo...@gmail.com> wrote:
>
> > > > I've faced the same problem recently and fixed it by redrawing the
> > > > infowindow once the image loads.
> > > > (Actually i'm using Mike's ELabel not the infowindow but the technique
> > > > is the same).
>
> > > > Your page is XHTML and the onload attribute for IMG elements is not
> > > > valid in XHTML so you'd need to add the onload event using javascript
> > > > btw.
>
> > > > I'd suggest you wrap your infowindow contents in a DIV element with an
> > > > id and then open your infowindow.
>
> > > > Use myDiv.getElementsByTagName('img') to get a node list of all IMG
> > > > elements within the infowindow and loop through them adding an onload
> > > > event listener to each image.
>
> > > > The onload event listener can then set width and height attributes for
> > > > any IMG elements once the image has been retrieved from the server and
> > > > redraw the infowindow.
>
> > > > Watch the redraw process doesn't go into an infinite loop - only add
> > > > the onload event listener to an IMG element the first time it is
> > > > displayed.
>
> > > > I'd rather not post a link to my (currently being developed) map on
> > > > the group so if you'd like to see the code i've used then send me an
> > > > email.
>
> > > > Martin.
>
> > > > On 26 Oct, 22:16, Papa Bear <papabear.newy...@gmail.com> wrote:
>
> > > > > I have a map with a fair number of markers, each with a bit of
> > > > > information that gets displayed in the infoWindow.  The markers
> > > > > represent boundary monuments on the US - Canadian border.  Here's the
> > > > > map:
>
> > > > >http://members.bellatlantic.net/~vze2h6gy/papabear/BM_Station_GMap.ht...
>
> > > > > Some of the markers (about 20 out of the total of several hundred)
> > > > > also display a thumb nail photo.  These are the ones I have actually
> > > > > visited,
>
> > > > > The map is generated client-side and it's all vanilla java script.
> > > > > The data is in a separate .js file and consists of several arrays of
> > > > > objects.  Although I am still tinkering with the code, functionally it
> > > > > basically works, (although like many others it was written and
> > > > > debugged using Firefox, so I haven't checked every last little feature
> > > > > under IE).
>
> > > > > The problem: all the verbal content comes from the server where my map
> > > > > comes from, so it is generally all resident on the client's PC once
> > > > > the thing gets loaded.  The photos, however, come from another server
> > > > > and they are generally only pulled down when the info Window is
> > > > > created.  They are specified using html <img ...> tags.  Most times
> > > > > things work fine, but a noticeable fraction of the time the text will
> > > > > appear and the infoWindow will be brought up before the photo
> > > > > arrives.  When it does arrive, it gets put where it belongs, but more
> > > > > often than not, it will go outside the bounds of the infoWindow.
>
> > > > > I have a general idea how large the thumbnails with be, but a goodly
> > > > > number have an odd aspect ratio which I can't predict in advance, so I
> > > > > can't just pre allocate the right
> > > > > amount of space in the <div ...> that holds the <img ...>.
>
> > > > > I can do an updateInfoWindow(), and that indeed works, but I don't
> > > > > know when to do it.  If I wait say 250 msec and call it, it may be too
> > > > > soon or too late.  And when I do it too far out, I get an annoying
> > > > > flicker.
>
> > > > > Any suggestions?  Any one know a way to tell when the photo gets
> > > > > loaded?  Is there some Dom event for that?  How do fancy professional
> > > > > sites handle this sort of thing?
>
> > > > > If you want to see the affect, try clicking on the markers with these
> > > > > names of the map:
> > > > > Hereford
> > > > > Beecher Tablet
> > > > > Hill Tablet
> > > > > Metallak
> > > > > Pros (which is hiding behind Spect)
> > > > > the unlabeled marker on the upper right end of the border
> > > > > the unlabeled marker on the lower left end of the border
> > > > > the unlabeled marker at the upper left, where the green markers start.
>
> > > > > I you have fast service to my photo server, maybe you won't see the
> > > > > problem.  For me it's about 50 / 50.
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups "Google Maps API" group.
To post to this group, send email to google-maps-api@googlegroups.com
To unsubscribe from this group, send email to google-maps-api+unsubscribe@googlegroups.com
For more options, visit this group at http://groups.google.com/group/google-maps-api?hl=en
-~----------~----~----~----~------~----~------~--~---