Forum | Appery.io

I am using the map component on one of the pages in my project. As part of the functionality, I call map.fitBounds() to display the relevant area of the map where markers appear.

The issue is that on testing, the original version of map appears first (momentarily) and then the new version with markers and fitBounds shows up. This causes disruption in user experience.

Is there a way to not show the original version map (i.e. the one created via placing component in Appery UI), but only display the desired version of the map?

Thank you.

Hi Cody.

Please follow this solution:

1 Add "page show" event handler to your page(with map) and fill it with following code:

pre

//This code will hide your map from user eyes.

//Note: "googlemap_29" your mapp component name. Replace it with yours.
jQuery('[name="googlemap_29"]').css("visibility", "hidden");

/pre

2 Add following code in place where you call "map.fitBounds()":

pre

//This code will show your map when you need.

//Note: "googlemap_29" your mapp component name. Replace it with yours.
jQuery('[name="googlemap_29"]').css("visibility", "visible");

/pre

Regards.

Many thanks Yurii! One comment for benefit of someone else who runs into similar issue - instead of hiding visibility on the very page the map is displayed, I've done so at the main page of the app. Otherwise the map appears momentarily, then gets hidden (visibility is set to false on page show), and then appears again when visibility is set true.