[Google Maps]  Error: Cannot read property 'fitBounds' of null

[Google Maps]  Error: Cannot read property 'fitBounds' of null

  
Forge Component
(14)
Published on 4 Oct by OutSystems Labs
14 votes
Published on 4 Oct by OutSystems Labs

Hi all,


sometimes I'm having this issue ("error1" image) when I'm rendering a page, the console error report that it's showing it's on "error2" image.

The OS code that i'm using it's on "OSFlow" image and the Javascript I'm using on "run Javascrip" action it's on "JS" text attachment. This code it's inside a webblock.

It's a little bit strange because the error not always appears when I load the page, it's random...


Anyone as any idea how can I fix this error?


Thanks in advance!


Cheers


Solution

Hello, Gonçalo,

I suspect the problem might be related to the fact that, occasionally, the map is not loaded once your JavaScript runs.

Normally, I'd suggest to stick to the actions provided by the component, but since this is an advanced scenario that can't be achieved through those alone (even the bounds you use have hard-coded coordinates instead of markers), we're going to need some JavaScript magic to ensure this code runs at the right time:

"function initMap(mapArg) {
    console.log('Map now initialized! You can use \'mapArg\' to access the map that was initialized.');
    console.log('Id: '+mapArg.mapId);
}

(function(){
    // Get the used OSGoogleMap
    var map = osGoogleMap.getMap('"+TestMap.Id+"');
    
    // Execute the initialization code only after loading was completed;
    // by then, everything will have been initialized
    map.executeOnLoad('"+TestMap.Id+"', initMap);
})();"

This code will do a console.log once the map is loaded. Assuming that was the issue, it should solve those intermittent problems.

If by chance, you're still having them, please let us know and we'll help. :)

Carlos Simões


Solution

Hi Carlos,

thank you for you quick answer (like always!)

I have one doubt:

-where should sit this code in my JS code? 

I tested your code, copy&pasted (changing "+TestMap.Id+" to my OSGoogle map id) to the end of my JS code and I was not able to load the overlay.

I tested it at the end of my Preparation action flow.

So you... :

  1. copy-pasted my snippet;
  2. added your functions (USGSOverlay, etc...);
  3. replaced the console.log call by the initMap() action you had

...but it still doesn't work? Could you try it with break on uncaught exceptions  while refreshing the page? Or placing a 'debugger' statement at the start of the initMap function and step over each statement?

If you're not able to find out what wrong by doing it, could you share the exception, in case it's different? If it's not, I'm not sure why the map is not present then.

PS: You're welcome! We try to respond whenever we have the time!

Hi Carlos,

sorry for just give feedback now. On my previous test I was missing to declare a function, after correct that your  solution work like a charm! :)

Thank you for your great help.

Cheers 

Awesome! Glad things worked out!

This is kind of an advanced scenario, which uses the internals of the component, so take extra care to test it after a Forge upgrade. We don't plan on changing the executeOnLoad function (it's used by nearly all actions), but you never know...

Best regards,

Carlos