Google Maps Javascript API - Legend Max Height - javascript

I'm displaying a map using Google Maps Javascript API and have created a custom legend to toggle certain map paths/markers on and off. The data in the legend is loaded by PHP using entries in a database, so I don't have control over how many checkboxes will be present. At the moment, the legend div expands as required to accommodate however many checkboxes are required, but I'm looking to stop it from expanding beyond the confines of the map.
At the moment, my legend displays as below:
And when I move the bottom of the browser up to reduce the screen height, it draws the div beyond the bottom of the screen:
Does anyone know of a way to tell the div not to expand vertically beyond the edge of the map? I could obviously set a max-height value based on the height of the map, minus the top position of the legend div, but I'm looking for something a little more native, possibly along the lines of map.controls[google.maps.ControlPosition.LEFT_TOP].push(document.getElementById('mapLegend')); but for setting the bottom most value? That way, the map can adjust as required even on mobile or small screens (like in the second screenshot where the Google logo displays over the legend).
I know this is a very open ended question but I would appreciate any help or pointers anyone can give.
Thanks in advance.

I ended up using the CSS calc function to manually set the max height of the legend depending on the size of the screen.
.mapLegend {
height: auto;
max-height: calc(100vh - 175px); /* Top bar, plus height of Google logo at bottom, plus absolute top position of Legend div, plus buffer */
}
#media (max-height: 269px) {
.mapLegend {
height: auto;
max-height: calc(100vh - 120px); /* When screen <270px tall, some Google Maps controls are hidden, so legend moves up, so can expand further down the bottom */
}
}
By setting the height to auto, it will only be as big as it needs to be to accommodate as many checkboxes as are necessary, and the max-height stops the overflow from extending beyond the bottom of the screen. Note that on small screens (or when a tall screen is dragged up to reduce it's height), the Google Maps UI changes to hide some non-essential controls, so I added the screen height breakpoint to cater for this.
Hope this helps someone.

Related

Stretch content div to fill screen when content is less than whole page | Enjin

I'm working on an enjin site for a friend and cannot for the life of me understand how to make the page here stretch to fill the whole screen vertically if the content does not have enough in it to do it on it's own. I've tried scripts and CSS of a dozen or more solutions and cannot understand how to make it do this because it's not my code, its Enjin's, and I have to work around it.
There are 2 pages in question, one is a standard format page so anything done to it can be done to all pages except the custom one and there will be no problems, and the other is a custom coded page using their HTML module. The key is the same solution is necessary for both but they have different code.
Custom Page: X |
Standard Page: X
Simply put I'm asking for a solution here. I tried the flex solution, height 100% with block display, javascript to find the distance between the bottom of the bottom div and the bottom of the monitor and adjust height accordingly, and more. Nothing seems to work. Any help is very gratefully appreciated.
I can provide any more details necessary, just ask.
What you are trying to accomplish is 2 things. First you want to make the div #memberContainer always be at least as tall as the users screen minus the height of your footer.
This can be acomplished with css using the "vh" unit. The vh unit is defined like this:
Relative to 1% of the height of the viewport*
And the calc function, as you will need to subtract 100vh (the screen height) from the height of your footer (180px).
So you need to add this code to your #memberContainer.
#memberContainer{min-height: calc(100vh - 180px)}
The second thing you need to do is make sure the background image of #memberBlock always covers the entire visible portion of the screen.
The image itself is 1920*1080, which is a standard 16:9 resolution. Assuming you only wanted to target 16:9 screens this would work fine. However to cover mobile phones and all other screens I would recommend you use:
#memberBlock{background-size:cover}
This makes sure the image will always cover the screen.
You can't have no gap and no content to fill it. There will have to be a gap somewhere.. Your gap is appearing in the middle because the footer is absolutely positioned. If you stop positioning your footer absolutely, the footer will cling to the body-wrap, however, you will still have a gap at the bottom, it just won't look as bad.
.myfooter {
display: none;
width: 100%;
position: relative;
background-color: RGB(20, 20, 20);
height: 180px;
bottom: 0;
}
If you really wanted to make it fit the screen, you could give a min-height with a calc of 100vh-FooterHeight
position: absolute;
height: 100%;
There may be other issues with this as i have no idea how mobile or responsive stuff would work for your site specifically but this is one way. You are coupling the BG div to the content div - that is why you are seeing that behavior - you need to make the BG a sibling div of content instead of a parent child relationship then you can have more flexibility on how it works - but for now my option seems to work

google maps scaleControlOptions changing position of scale on map

I noticed that there was no option to change the position of the scale on google maps using scaleControlOptions (correct me if I'm wrong) and was wondering if there was any way to get around that and display the scale on the bottom left position.
According to the documentation:
scaleControl enables/disables the Scale control that provides a simple
map scale. By default, this control is not visible. When enabled, it
will always appear in the bottom right corner of the map.
So unfortunately, you won't be able to put it in the bottom left position.
You can't do it with the built in options unfortunately, but you can do it with some simple CSS:
.gm-bundled-control-on-bottom {
right: auto !important;
left: 25px;
}
Not sure whether this goes against their TOS but it works.

Why Google Charts always overflows?

I'm digging google for an hour now, to find out why google chart api makes it's parent dom to overflow.
Scrollbars appear every time I draw the chart
As you can see there is no padding or margin. When I use default settings for chart.draw() I got the same result.
How can I make the chart to just fit in it's container?
(overflow: hidden is not a good solution here, because the chart itself also overflows and I don't want to cut it off)
Thank you in advance for any help!
Update: JsFiddle
In your case the problem is basically that you specify a height to #chart, and set it to overflow-y: auto. This will cause the vertical scollbar to appear, and since you set the width: 100%, and the vertical scrollbar takes space, a horizontal scrollbar appears. Remove the overflow-y: auto declaration and you're good to go. I suggest you remove the height: 350px as well

Dynamically fit webpage into browser vertically

I'm relatively new to all of this and have been working on a page for the last week. I've found this site to be very useful so far but I can't seem to get my page to dynamically fit entirely on the browser window vertically. I want it to shrink the elements so that it all fits in the browser without a vertical scroll bar. The reason for this is simple, it will be a landing page that is mobile app inspired, press the button and it will take you to where you need to go. However, users will have different screen sizes/resolutions, so the page must be fluid.
I have managed to get the page to shrink according to the width of the browser, as demonstrated here (jsFiddle Demo).
container {
padding: 1% 1%;
width: 80%;
height: 100%;
max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
/*min-width: 780px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
margin: 0 auto; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
}
As you can see, all elements shrink dynamically based on the width of the browser. However, when viewed on a 1024x768 screen, the bottom row of "buttons" is half cut off by the browser and the user has to scroll to see the rest.
I have tried a few solutions on this site but cannot seem to get it to work. Can anybody here help me to get it to adjust dynamically to the browser's width AND height?
To better illustrate what I would like, this is the effect I would like to see dynamic resizing example
Here is an image that shows exactly what my problem is Difference in Resolution http://img404.imageshack.us/img404/5840/resolutionissue.jpg
Note that the spacing between the buttons shrinks due to the percentage spacing but the images will shrink to fit if the window is adjusted horizontally only. I need it to squeeze the whole thing into the browser window.
To ensure that your container and child elements (where required) fill the screen vertically you need to ensure that you are also applying a 100% height value to the overall parents of these elements. In your case I would apply the following rule to your css:
html,body
{
height: 100%;
padding: 0px;
margin: 0px;
}
This would then cause your container to adapt to 100% of height of the browser window (as container is the child of your overall body which is a child of the html tag). However, as you have applied padding you will still see the vertical scroll bar. You therefore need to ensure that you reduce the height % of your container element in relation to the padding / margins that you apply. In your case as Kai Qing suggests above you should change your container height to 98%.

Strange javascript scroll bar issue

I am using the jScrollPane to add scroll bars to pages that exceed a certain height.
I can't figure out why the following page gets scroll bars even though the content is not overflowing my boundary.
Can anyone help please?
http://souk.gumpshen.com/test/contact.htm
In style.css there is a class applied to the html tag
html{
overflow-y: scroll;
}
If I remove this style and zoom out then the scroll bars go away. I think it depends on the zoom level of the browser. If the user is set at a low resolution or zoomed in the contents do overflow.

Categories

Resources