[Google Maps] document.getElementById

Forge Component
Published on 2018-10-18 by Labs
27 votes
Published on 2018-10-18 by Labs
I have been developing applications with Outsystems since 2011 however this is my first time using the Google Maps component.

I am currently developing a real estate market statistics application for the state of Hawaii USA.. So far I have successfully created a map of the Big Island of Hawaii, added a center marker and markers for the 9 "districts" that are used to summarize statistics as shown below:

I have also added marker events to each marker that displays an info window with a little data about the marker. I also want this event to pass back to Outsystems the current markers district and store it in a hidden input variable and click a hidden button that uses the contents of the input variable and passes it to an action that updates and redisplays the data table to the right of the map. The event handler looks like this:

While the info window works I get the following javascript error when I click on a marker:

I will be the first to admit that javascript is not my area of expertise. Is there something obvious here that I am doing wrong? If not, any help pointing me in the right direction to debug this issue would be greatly appreciated.
Here is a link to the application: if anyone wants to take a look using a browser js debugger.
Hey there, Gregg,

Awesome job of gathering all the info so I can reply as swiftly as possible!

By looking at your code and error, I'm near 100% certain that JS is not finding the 'inputObject' element by its Id. But unfortunately, since the 'Map' page you provided is currently returning an Internal Error ('[OSNOP1].DBO.[OSUSR_YSC_REPORTSET] with key 0 was not found'), I can't look at the DOM (the HTML content of the page) and the generated JavaScript to make a concrete plan to take action and fix the problem.

My educated guess is that when you are initializing that Marker event (running the JS), there is no input element. What I would do next is activate the break on exceptions feature of the browser, so I could stop the execution at the precise moment of the crash and have a look if something is off.

Please let me know if you get the page up and running again, so I can have a look.

Best regards

Carlos Simões
Hi Carlos,

The URL is fixed. There were some session variables that were not set. This was caused by making this page anonymous and not having you login to the app first. I set my brower debugger to pause on exceptions and this is what I see:

Thank you for your assistance.
When I change the hidden input and button widgets to visible True the marker events work perfect. After enclosing the two widgets in a container and setting the container's to visible = False the marker events are working perfect.

Thank you for pointing me in the right direction. Problem solved!!
Cool, Gregg! I just had a look at the page and I see that the Markers on both maps are displaying the InfoWindows properly!

I was not 100% sure that the way you would fix it would work (see my note below for an explanation), but I'm glad that not only it did, you also shared it with us! :)

Feel free to ask anything else you need to clear up!

Note: From what I remember, setting the Visible preoperty to False stops the widgets from being rendered to the page (and in this case, from being found by JS). But it turns out (from your description) that doing it on an outer container renders everything, but wraps them in a "display:none" style.