[Google Maps Mobile] Map is not loading after refreshing the page

[Google Maps Mobile] Map is not loading after refreshing the page

  
Forge Component
(9)
Published on 24 May by Labs
9 votes
Published on 24 May by Labs

Hi. I have a screen on my mobile app where I had an instance of the google map block at the beginning and a list of different addresses bellow. Inside the onChange event of each list item I'm changing the address parameter of the map, but the problem is that I want to go back to the beginning of the screen each time the user click an address from the list, in order to show the updated map with the proper address. I couldn't find a way to do it using javascript, so what I'm doing is redirecting to the same page at the end of the mentioned onChange client action passing the address as an input parameter, and in the oninitialize event, I'm setting the map address with the input value. It works fine sometimes, but some others, the map doesn't load and it looks like a gray image only. I'm not getting any error message in the console. I tried reading the ErrorMessage output parameter of the MapOnError event, but it doesn't return any error when the problem happens. I'll appreciate any advice to solve the issue.

Hello,

The same address fail always or sometimes the same address works and sometimes fail?

Can you provide a small but complete module that reproduce this behaviour?

Also, I would expect that navigating to an id "#"+SomeWidget.Id would work, as this is an anchor and if you name the map, you can use it as anchor and focus on it. I never tried it on mobile so I don't know if it will work. Have you tried it?

Cheers

Eduardo Jauch

Hello Eduardo,

Regarding your first question, the answer is sometimes the same address work and sometimes fail.

I'll try to create a small module with to share to you reproducing this behavor.

I've already tried using "#"+SomeWidget.Id, but, for some reason it takes to the module's home page.

Thank you for your help. I will be uploading the oml as soon as I can.

Hi Mariela,

I also face same type of problem in google map when I am changing different address dynamically in the google map. Also in my case, gray image come in google map when the process is incomplete or some parameter is not render correctly during refresh of map and also you will not get any error log for that in outsystem.

I know right now you dnt have oml but you can share the screenshot, we will get the idea how you are implementing.

Regards

Rajat Agrawal

Hi Mariela,

I need screenshot just to see your requirement because if it like I need then I'll share you the oml.

Regards

Rajat Agrawal

Hello,

I'v being investigating.
Trying to use a link to move inside the same page will not work as expected.

The solution I found was to use JQuery Mobile, as it has methods to do this "in page" navigation, but I didn't have time to test it.

If you want to try...
For example, with animation: https://stackoverflow.com/questions/10407394/jquerymobile-scroll-to-div-after-page-loads
Using Silent Scroll: https://api.jquerymobile.com/jquery.mobile.silentscroll/

Hope this helps.

Cheers,
Eduardo Jauch

Hi Mariela,

If I understood you correctly, you want to scroll up on the click event of the items below the map.

I built a very simple example on how to achieve it, can you give it a try?

Let me know if it worked.

Cheers,

Henrique

Hi Henrique,

Nice solution :)
I had read about the ScrollTo but most of the time it was said that it had some kind of problem (don't remember what...).

Cheers,

Eduardo Jauch

Hi Eduardo,

I've already used it on other components and I didn't experienced any problems.

If you remember what those may be, please let me know so I can fix some of my implementations.

Thanks,

Henrique

Henrique Batista wrote:

Hi Eduardo,

I've already used it on other components and I didn't experienced any problems.

If you remember what those may be, please let me know so I can fix some of my implementations.

Thanks,

Henrique

Hi Henrique,

Forget it. I was mixing the ScrollTo with the one used with Animation (that is the one that has some problems in some devices).

https://blog.jonathanargentiero.com/jquery-scrolltop-not-working-on-mobile-devices-iphone-ipad-android-phones/

Cheers,
Eduardo Jauch


Hi Henrique. Thank you very much. It's working fine. It's exactly what I needed.

Hey Mariela,

Happy to help.

Cheers,

Henrique

I was trying with ScrollTo but, pointing to a container and did't work. But with your solution, pointing to the content placeholder, it works fine!

The problem I have now is that it doesn´t work on IOS as I need.   

Hey,

Which part doesn't work? My example or your app?

Can you give more details?

With IOS 11 works fine, but with lower versions, I'm getting the error shown in the attached image.

Solution

Hi Mariela,

Sorry for the delayed answer.

Can you replace the scrollTo(0,0) and replace it by "scrollTop = 0;" ?

It did the trick on my side.

Let me know if it worked.

Cheers,

Henrique

Solution

Henrique Batista wrote:

Hi Mariela,

Sorry for the delayed answer.

Can you replace the scrollTo(0,0) and replace it by "scrollTop = 0;" ?

It did the trick on my side.

Let me know if it worked.

Cheers,

Henrique


Thank you very much. It's working now in IOS 10, 11 and Android with ScrollTop!