Page 1 of 3
How do you set the CSS for a Map object to get the Height to be 100% of the Screen?
Posted: Fri Jul 19, 2013 2:06 am
by mollyfud
Hi Guys,
I have searched and tried lots of things in this forum for setting the CSS for a Map to be a full screen. None of it works across Browser and Native Clients. I want to try to code it so the map is full screen on any device of any size. Setting Css to 100% for height seems the answer but I can't get it to work.
Can anyone give me an example of how to do this? I have looked at other methods and forums and not working for me.
TIA
Molly
How do you set the CSS for a Map object to get the Height to be 100% of the Screen?
Posted: Fri Jul 19, 2013 7:43 am
by Maryna Brodina
Hello! If there is only map on page and you want it to fill in 100% height create JS asset with the following code:
codefunction 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();
})/code
where googlemapName - Google map component name
on page where you have map on Show event run:
coderesizeMap();/code
How do you set the CSS for a Map object to get the Height to be 100% of the Screen?
Posted: Fri Jul 19, 2013 2:28 pm
by mollyfud
Perfect! Thank you so much! Works perfectly on Web, Mobile Web and Native Android App (Only haven't tried on iOS but sure it will work great)!
How do you set the CSS for a Map object to get the Height to be 100% of the Screen?
Posted: Mon Nov 04, 2013 6:36 pm
by laura6372139
Hi Maryna:
I have a grid, image and the map on my screen.
I cannot fit my map in my screen.
I have loaded this code but does not fit the map on different screens. 
How do you set the CSS for a Map object to get the Height to be 100% of the Screen?
Posted: Mon Nov 04, 2013 7:25 pm
by Kateryna Grynko
Hi Laura,
Please give us a public link to your app.
How do you set the CSS for a Map object to get the Height to be 100% of the Screen?
Posted: Tue Nov 05, 2013 8:28 am
by laura6372139
How do you set the CSS for a Map object to get the Height to be 100% of the Screen?
Posted: Tue Nov 05, 2013 9:32 am
by Maryna Brodina
Hello! Thank you, we'll take a look and let you know.
How do you set the CSS for a Map object to get the Height to be 100% of the Screen?
Posted: Tue Nov 05, 2013 1:42 pm
by Maryna Brodina
Hi Laura! This issue seems to be not reproducible. See how it looks like on our side
How do you set the CSS for a Map object to get the Height to be 100% of the Screen?
Posted: Tue Nov 05, 2013 2:52 pm
by laura6372139
How do you set the CSS for a Map object to get the Height to be 100% of the Screen?
Posted: Mon Nov 11, 2013 11:46 am
by laura6372139
Hello!!!
Not be that it happens but with this function that it fit before now not conforms to the map.
http://appery.io/app/mobile-frame?src...
Thaks!!!!!
