Google Maps Default Styling Hides Entire Map - javascript

Trying to add Google Maps to a new web page on an existing Laravel project, which is proving to be a huge pain in the backside.
https://www.beenleighrum.com.au/findme
The code is solid as it works on multiple other websites.
The issue is that by default, the element has a position of relative:
style="position: relative;overflow: hidden;"
If I open DevTools (F12) and change the position to Static then the map shows up. Problem is that the google maps API wants it to be relative and unless I can change it, I don't see how my map is going to display properly?

You need to set width & height to your map container.
#map {
width: 100%;
height: 100%
}

Set you width and height to your map:
#map {
width: 100vw;
height: 100vh;
}
which means 100% viewport width and 100% viewport height. With vw and vh you don't have to deal with the container of your #map.

Related

Set CSS coordinates based on parent element

I have a game-level map image like this and I code by manual HTML - CSS - JS. I want to attach
the level number based on the coordinates of the image but it moves to another position for another screen. I have used relative position for the parent element and absolute position for child elements. (I tried using px, em, rem, in, cm unit, but it hasn't worked well)
I just want an idea for this problem. Thank you!
I think there are several ways to solve that problem.
You mentioned like (I tried using px, em, rem, in, cm unit, but it hasn't worked well), it's true you failed because you tried with fixed amount.
In order to make sure the child image is fixed on the certain place of parent image, you should use dynamic amount like following alternative solutions.
CSS
You can use percent in styling like.
.map {
position: absolute;
width: ###%;
height: ###%;
x: ###%;
y: ###%;
}
You can use javascript.
When loads the initial screen, you can calculate the ratio of the parent width to screen's width. And you can apply it to the styling using CSS selector or ID.
Update the design.
I think it's the proper and best solution. So you can update the design with map and markers together.
Hope it works for you!
I'm not sure if I get it right. You are trying to position the numbers relative to the whole background image? What are the other screen you refer? Can you show an actual screenshot of the issue?
I would do:
<div class="image">
<span id="span-1">1</span>
<span id="span-2">2</span>
</div>
and then use PERCENTAGES to the determine the position of the numbers:
.image {
position: relative;
background: red;
width: 100px;
height: 100px;
}
span {
position: absolute;
}
#span-1 {
left: 55%;
}
#span-2{
left: 20%;
top: 75%;
}
Sandbox

How to make a highchart's Tree Map chart fill the entire page without overflowing

HighChart's Tree Map series works like a charm when it comes to fill the entire page width with a fixed height: as you resize the page, the tree map will resize horizontally accordingly.
On the other hand, if you try to make the height a percentage then resizing breaks completely. I was not able to make a tree map chart which fills the entire page horizontally and vertically. I really think I'm missing something!
I've made a fiddle to show the problem: https://jsfiddle.net/gqeLfxy3/
Setting body and the chart's container height and width to 100% didn't help.
body {
width:100%;
height:100%;
margin:0;
padding:0;
}
.highcharts-figure {
width: 100%;
height: 100%;
margin: 0;
}
If the chart height is set to a percentage, it resizes "badly":
Highcharts.chart('container', {
chart: {
height: '100%', // set it to a fixed size and the chart will behave well but won't fill the entire height
margin:0
},
The chart should fill the page and not overflow it. I didn't find any way of doing it sort of setting a fixed height to the chart and, possibly, listening to resize events.
Does anyone know a way to accomplish that?
You need to use vh units:
#container {
height: 100vh;
}
Live demo: https://jsfiddle.net/BlackLabel/yudsaL8n/
API Reference: https://api.highcharts.com/highmaps/chart.height

Chrome for iOS vs. <style>height: 100vh;</style>

Chrome for iOS hides its address bar when the user scrolls up. This feature does not work well with 100vh (or any vh unit) because as the toolbar shrinks, the viewport height changes and thus the size of the element changes. I have a cover image with 100vh and it causes a very noticeable jitter as the length of the entire page grows or shrinks.
The problem exists for any height set with vh, I think.
I can (and probably will) resort to javascript to set my cover image height, but I'd prefer to use vh.
Any clever ideas?
I'd recommend using 100% instead of 100vh - you can add this...
body{
position: absolute;
width: 100%;
height: 100%;
margin: 0;
}
From there, any element without another wrapper that has its own height will be able to fill the full screen just using width and height at 100%. Example below!
https://codepen.io/will0220/pen/KXqoGZ

Make google maps fill height

I'm using this link to include Google Maps in my Ionic app.
It works fine, but I would like it to fill the entire height that is still available beneath the header.
I'm only able to give it a height in px, like so:
.angular-google-map-container { height: 200px;}
The moment I change it to %, it doesn't show the map anymore.
Anyone who can help me with this?
Everytime you are using a percentage you have to ask yourself "Percentage of what?"... Since you didn't provide the whole code it is impossible to answer you perfectly.
By using .angular-google-map-container { height: 200px;} you are forcing all parents container to increase their size to fit the 200px height. That's why it works.
A dumb fix would be using view port height value. Something like :
height: 80vh;
Which is 80% of the view port height.
I managed to make it work using:
.angular-google-map-container {
position: absolute;
top: 20px;
bottom: 0;
right: 0;
left: 0;
}

Need responsive iframe (div) / fixed aspect ratio / centered horizontally and vertically / that SCALES itself so it's not getting browser-cropped

Oh man this is frustrating. I always thought I know my way around HTML and CSS but this is driving me crazy!
I have a blank black HTML page only containing a 16:9 iframe with the id "content".
In this iframe videos and photos with an 16:9 aspect ratio will be shown to the user (this will be an offline application running in Firefox, something like a primitive media player).
Everything inside the iframe works (quite an elaborate multimedia experience) everything is fine EXCEPT the placement/dimensions of that "player" iframe on the blank index page!
It needs to be centered VERTICALLY with a width of 100% thus touching both sides of the browser window,
it needs to be responsive when the browser windows is resized but needs to keep its aspect ratio of course,
and most important; it must always be completely visible! Meaning I must NOT be cropped by the browser window!
No big deal I reckon with tall 4:3 or 5:4 displays, when centered vertically there will be bars at the top and the bottom of the iframe (the black HTML body) and it won't be cropped anywhere.
But kind of a big deal with 16:10 an 16:9 displays since the browser toolbars and the Windows task bar and what have you screw everything up, the aspect ratio isn't really 16:9 or 16:10 anymore when the browser is maximized. So the 16:9 iframe would not be completely visible, it would get cropped a the bottom.
(or maybe the user hasn't even maximized the browser and uses the application in an awkward proportioned window with an even more extreme aspect ratio).
So the iframe needs to STOP growing responsively before its bottom side gets cropped by the browser window. Never be taller than 100vh.
I tried A LOT and in the end I had convoluted div-arrays with a shtload of CSS that accomplished almost everything except the bottom clipping.
I am aware of things like "vh" and "vw" and "max-height" and what have you and I tried A LOT. Never got that iframe from being cropped at the bottom when the browser windows gets too long. I tried things similar to THIS:
Vertically center responsive iframe
but with this the elements height cannot be limited to "100vh" since it uses this padding-workaround for keeping its aspect ratio. :-(
I mean this must be possible, right? A centered (h&v) 16:9 div/iframe that uses as much screen estate as possible but refrains from being cropped anywhere.
HELP PLEASE! Thank you!!
Taken from Bootstrap 3.0, just apply the CSS class and whether it should be 16 by 9 or 4 by 3:
JSfiddle with the result: http://jsfiddle.net/crisbeto/jvcg8v0y/
/* Embeds responsive
Credit: Nicolas Gallagher and SUIT CSS. */
.embed-responsive {
position: relative;
display: block;
height: 0;
padding: 0;
overflow: hidden;
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object {
position: absolute;
top: 0;
left: 0;
bottom: 0;
height: 100%;
width: 100%;
border: 0;
}
.embed-responsive.embed-responsive-16by9 {
padding-bottom: 56.25%;
}
.embed-responsive.embed-responsive-4by3 {
padding-bottom: 75%;
}
create a <div> and give that the ID "pusher" like this:
<div id="pusher"></div>
and then add these css properties:
#pusher{
height: 50%;
}
now set the css properties for your iframe, Give this a top-margin of minus half the height of the iframe, so if the iframe was 300 pixels heigh, your css for the iframe would be:
iframe{
margin-top: -150px;
}
you could probaly use:
iframe{
height: 100%;
width: 100%;
margin-top: -50%;
}
when you apply this method, what you basicly do is push all content to the vertical center of the screen, that way the "origin point" is at the center of the screen (vertical) now to center it like you needed you are applying the negative margin to center the "center point"

Categories