Forum | Appery.io

When I use a googlemap component only with a header and a footer(appery.io), I can set the fixed Dimension (which corresponds to the height). But if the device that I'm using for testing has a different size than the default page size I'm using for development, then a blank space remains between the Gmap window and the footer or, if the screen is smaller, a slider appears. How can this be configured to use the whole space, and only the space, between the header and the footer ?

thanks

Hi Marcel --

You can implement this by adding different CSS rules for different screens for your map component:
https://developer.mozilla.org/en-US/d...

Hi Illya,

Thanks for your reply, although it doesn't help me a lot in my Appery.io evaluation for building my new project.

Can you give me a hint on at least how to modify the Dimension set in the Properties window for the google map component ?

What happens if I work with the WEB_RESOURCES source codes? Is this recommended ?

Thanks.

If there is only map on page and you want it to fill in 100% height create JS asset with the following code:
pre
function resizeMap() {
var divs = $("[dsid=googlemapName]");
if (divs.length) {
var mapDiv = divs.eq(0);
mapDiv.css("margin", "0");
mapDiv.css("display", "none");
mapDiv.height(mapDiv.parents('[data-role="content"]').height());
mapDiv.css("display", "block");
}
}

$(window).bind('resize', function(event) {
resizeMap();
})
/pre
-- where googlemapName - Google map component name;

on page where you have map, on Show event run:
preresizeMap();/pre

You can work with source files in the source tab - but we recommend to make changes there in final steps of the app development.
:: http://docs.appery.io/tutorials/sourc...

Thanks a lot.