need reference to info window HTML element prior to marker click event

246 views
Skip to first unread message

Quaye Trimble

unread,
Oct 9, 2012, 12:54:24 PM10/9/12
to google-map...@googlegroups.com
Is it possible to reference an HTML element that exists inside an info window prior to the marker click event?  There are several markers so I bind the info window to the marker in a function separate from the main info window creation function.

For some background I'll provide a summary of what I'm attempting to do.  I'm mapping several observational platforms and graphing each platforms' environmental parameters in the google maps api  v3 info window.  See this link for a working example: http://bccmws.coastal.edu/LBOOS/dev_gmap.html

This is not the best method because:
- the JSON file containing the data is loaded into the application every time a table row is clicked in the info window
- requires user interaction to see a graph when the info window opens (no default parameter is graphed)
- the same chart properties are used for every graph which may not be a suitable way to display the data

Ideally, each platforms' data is loaded and graphed when gathering the information needed to map the position of the platform.  The problem is, Highcharts (the graphing library) needs a reference to the div where the graph will be displayed.  Setting this information prior to the marker click causes a reference error.  Setting the reference after the click just seems clunky.

Any help would be very much appreciated.

Rossko

unread,
Oct 9, 2012, 2:45:57 PM10/9/12
to Google Maps JavaScript API v3
> Is it possible to reference an HTML element that exists inside an info
> window prior to the marker click event?

That would depend if the infowindow exists yet or not. That depends on
your code that we can't see. Very often it doesn't exist yet.
A workaround would be to create the HTML content in the DOM
beforehand, and "park" it somewhere invisible. Then re-use it when
you do create the infowindow.

Here's a different approach you might be able to adapt
http://groups.google.com/group/google-maps-js-api-v3/browse_thread/thread/a41f56c1a3063520/0b61207988fb06ad
which avoids requiring things before they are created.

Quaye Trimble

unread,
Oct 9, 2012, 3:23:52 PM10/9/12
to google-map...@googlegroups.com
Thanks Rossko - I just implemented my new method which is what you described.  Just a few things I still need to do.  Here is the link: http://bccmws.coastal.edu/LBOOS/dev_gmap2.html.  Can you not use something like Firebug to see my code?

geoco...@gmail.com

unread,
Oct 9, 2012, 10:42:17 PM10/9/12
to Google Maps JavaScript API v3
On Oct 9, 12:23 pm, Quaye Trimble <qtrim...@gmail.com> wrote:
> Thanks Rossko - I just implemented my new method which is what you
> described.  Just a few things I still need to do.  Here is the link:http://bccmws.coastal.edu/LBOOS/dev_gmap2.html.  Can you not use something
> like Firebug to see my code?
>

This sort of what you are trying to do?
http://www.geocodezip.com/bccmws_coastal_edu_LBOOS_dev_gmap_b.html

Still doesn't show the very first time.

-- Larry

>
>
>
>
>
>
> On Tuesday, October 9, 2012 2:46:04 PM UTC-4, Rossko wrote:
>
> > > Is it possible to reference an HTML element that exists inside an info
> > > window prior to the marker click event?
>
> > That would depend if the infowindow exists yet or not. That depends on
> > your code that we can't see.  Very often it doesn't exist yet.
> > A workaround would be to create the HTML content in the DOM
> > beforehand, and "park" it somewhere invisible.  Then re-use it when
> > you do create the infowindow.
>
> > Here's a different approach you might be able to adapt
>
> >http://groups.google.com/group/google-maps-js-api-v3/browse_thread/th...

Rossko

unread,
Oct 10, 2012, 4:42:39 AM10/10/12
to Google Maps JavaScript API v3

aha - I misunderstood 'working example' as "this is the kind of thing
I want to do", my fault.

Quaye Trimble

unread,
Oct 10, 2012, 9:06:27 AM10/10/12
to google-map...@googlegroups.com
Larry - Can you explain how the domready listener is different than having the click listener ready to roll once infoWindow.setContent(content) is called.

Quaye Trimble

unread,
Oct 10, 2012, 9:09:38 AM10/10/12
to google-map...@googlegroups.com
Well I thought I was on the right track.  Creating the content and "parking" it for later use seemed like a good method until I realized grabbing the HTML to use inside the inforwindow breaks the chart display because of the duplicate div id's.

geoco...@gmail.com

unread,
Oct 10, 2012, 9:43:34 AM10/10/12
to Google Maps JavaScript API v3
On Oct 10, 6:06 am, Quaye Trimble <qtrim...@gmail.com> wrote:
> Larry - Can you explain how the domready listener is different
> than having the click listener ready to roll once
> infoWindow.setContent(content) is called.

What do you mean by "having the click listener ready to roll once
infoWindow.setContent(content) is called."

The infoWindow is not part of the DOM until some time after the click
listener runs, that is when the domready event fires.

If you need to run code that uses the DOM to access elements, it wound
work until after domready.

Quaye Trimble

unread,
Oct 10, 2012, 2:13:46 PM10/10/12
to google-map...@googlegroups.com
Well, I thought having the table row click handler ($('tr').live("click", function()) inside the $(document).ready function, that it would be listening for the click after the infowindow content is set (infoWindow.setContent(content)).  Your solution moved the table row click handler into the domready event which I thought is basically doing the same as $(document).ready.  So if the domready listener is different than $(document).ready, how is it different?

Rossko

unread,
Oct 10, 2012, 4:10:42 PM10/10/12
to Google Maps JavaScript API v3
>  So if the domready listener is different than
> $(document).ready, how is it different?

domready is an event fired by the Maps API, when it has finished
building an infowindow
https://developers.google.com/maps/documentation/javascript/reference#InfoWindow

$(document).ready is some jquery thing, you'd need to look at jquery
help for details about that. But so far as I know, it acts when the
page is first loaded and built. That might be seconds or days before
the viewer clicks on anything.
http://docs.jquery.com/Tutorials:Introducing_$(document).ready()

geoco...@gmail.com

unread,
Oct 10, 2012, 10:30:28 PM10/10/12
to Google Maps JavaScript API v3
On Oct 10, 11:13 am, Quaye Trimble <qtrim...@gmail.com> wrote:
> Well, I thought having the table row click handler
> ($('tr').live("click",

Also, you should be aware that .live is deprecated:

http://api.jquery.com/live/


> function()) inside the $(document).ready function, that it would
> be listening for the click after the infowindow content is set
> (infoWindow.setContent(content)).  Your solution moved the table
> row click handler into the domready event which I thought is
> basically doing the same as $(document).ready.
> So if the domready listener is different than
> $(document).ready, how is it different?


See Rossko's post (and my explanation in my post of why my version
works).

-- Larry
Reply all
Reply to author
Forward
0 new messages