Forum | Appery.io

Hi,

I have a page which displays a google map component with markers which are loaded on page load via javascript.
I would like the map to fill the screen. I have the javascript which will calculate the screen height but I'd like this to happen before the page is actually displayed.
My thinking is I display a splash page before the map loads during which time the map page could be 'pre loaded'.

Is there a way to do this?

Jquery has pre-fetch and '$.mobile.loadPage()' but I can't find the correct configuration.

Thanks

Hi Paul.

There is a better solution for you:

1. Remove all javacript code which is you wrote for this purpose.

   2 Open gmaps component properties.

   3 Set "Class Name" property as "fullScreenGMaps" http://prntscr.com/36iy53/direct

   4 Create new CSS. And fill it by following code:

   pre
   code

   div.fullScreenGMaps{
   position: absolute;
   left: 0px;
   right: 0px;
   /* you need to adjust it for header /
   top: 54px;
   / you need to adjust it for footer */
   bottom: 54px;
   width: auto;
   height: auto;
   }

   /code
   /pre

   That's all.

   Regards.

Thanks that works. Only Issue I have now is that it displays 'preview not ready' in a small box until the google map loads.
I have been playing around with $( ":mobile-pagecontainer" ).pagecontainer( "load", "googlemap.html", { role: "page" } ); but it doesn't seem to help.
Any suggestions?

Hello Paul,

You use incorrect jQuery selector.

Use
Appery( "mobilecontainer").pagecontainer( "load", "googlemap.html", { role: "page" } );
instead of:
$( ":mobile-pagecontainer" ).pagecontainer( "load", "googlemap.html", { role: "page" } );

where mobilecontainer - name of mobilecontainer component

thanks for this. all working now.