Forum | Appery.io

Hello,
I have a two page app, each has its own map object.

However, when I test my app, invariably, when I navigate to the second page, the second map has many missing tiles and if I move the map around, random tiles get dropped and random tiles appear.

http://prntscr.com/4co9d7
http://prntscr.com/4co9l0
http://prntscr.com/4co9ps

If I go back to the first page, the map over there works just fine.

My public test app is here:
http://appery.io/app/mobile-frame?src...

Any ideas?
-Jo

Hello Jo,

We can't reproduce this, both maps are displayed correctly. Could you please specify more detailed steps to reproduce the error?

Hi Evgene,
Thanks for your reply.

Could you try moving the map from the second page around? Any random movement will cause random tiles to disappear and reappear.

You will also notice (from your screenshots also) that even though the two map objects are supposed to display the exact same maps, the second map has its center offset and the marker is not displayed in the viewport. If you move the map around to bring the marker to the center, the tiles will start vanishing.

-Jo

Hi Joe,

I've checked this case and was able to reproduce it.

Unfortunatly this is bug. This bug has been reported to our developers.

Here is workaround for you:

1 Open first page.

2 Add "page show" event handler on the page with action "Run Javascript"

3 Populate it with following code:

pre

//Note: you need to replace "googlemap_3" with your component name on this page.
Appery("googlemap_3").refresh();

/pre

See details: http://prntscr.com/4cxmuu/direct

Also you should do the same on all pages you have map component.

Regards.

Hi Yurii,
With your suggestion, I see that the two maps are displaying correctly.

However, since the refresh() happens at each page show, if I set a location on one map, go to the next and come back to the first, I lose all information I set in the beginning as the map is refreshed again.

Is there anywhere else I can plug the call to refresh() so that it gets called only once initially? I tried putting it in page load, but it doesn't solve the problem.

Thanks.
-Jo

This thread helped me.
http://stackoverflow.com/questions/33...

I now call

google.maps.event.trigger(map, 'resize');

on my page show event and it fixes my issue partly.

The part that is not fixed is that the map does not get centered.

-Jo

With an additional variable that is set on the first page show, I can ensure that the call to refresh happens only once, and that seems like a workaround for now.

Please let me know when this issue gets fixed if possible.

Thanks.
-Jo

Hi Jo,

Thanks for your update.

pre

google.maps.event.trigger(map, 'resize');

/pre

This code really more preferably for this case.

We will update you here when the bug will be fixed.

Regards.