Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
I viewed a few other threads. When the code executes, you can see it's working and functioning properly via "Inspect Element"/source code, but it just shows a blank screen. I feel like it has something to do with the CSS, but I did all their CSS requirements in the "getting started" part of the google maps api introduction.
Code:
<div id="map-canvas"></div>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=API-KEY&sensor=false"></script>
<script type="text/javascript">
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(-34.397, 150.644),
zoom: 8,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map-canvas"),
mapOptions);
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
Of course, API-KEY is replaced with my key which works fine since it's valid.
Then my CSS:
html { height: 100%: ;}
body {
background: #f5f5f5;
font-family: Helvetica, Arial, sans-serif;
color: #666;
line-height: 140%;
font-size: 14px;
height: 100%;
margin: 0;
padding: 0;
}
#map-canvas { height: 100%; width: 100%; }
Any help would be greatly appreciated! Thank you!
Ah there was an error in my CSS (if you see the html { }, it has a semi-colon and a colon as well.
I also had to make sure the parent divs were at 100% height too.
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 years ago.
Improve this question
I can't figure out why this media query is not working. The media query is always referring to the first instance of the :root variables instead of the :root variables inside the media query.
// Outside media query
:root {
--default: 10px;
}
DIV {
width: var(--default);
}
//Inside media query
#media screen and (max-width: 55rem) {
:root {
--default: 500px;
}
DIV {
width: var(--default);
}
}
This always results in the h1 tag being 10px wide instead of 500px wide, even if the media query. (Testing in Chrome and iOS Safari.)
Any tips?
I'm following this guide: https://www.freecodecamp.org/news/how-to-make-responsiveness-super-simple-with-css-variables-8c90ebf80d7f/
DEMO
const log = () => console.log(getComputedStyle(document.documentElement).getPropertyValue('--default'));
log();
window.addEventListener('resize', log);
:root {
--default: 10px;
}
h1 {
width: var(--default);
}
#media screen and (max-width: 55rem) {
:root {
--default: 500px;
}
h1 {
width: var(--default);
}
}
<h1>HEADING</h1>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 4 years ago.
Improve this question
In css, I have class 'current-cat-parent' and class 'hide-it'. One is on the top of page and 2nd is in mid of page.
Now the thing is, I want to make appear 'hide-it' class's content only if class 'current-cat-parent' exist somewhere in the page, otherwise hide that content.
Please let me know how can make it possible
Thank you
The problem with Amir's answer is that the length of a div that exists on the page is 1 not 0. Also none should be "none"
see below
var parent = document.querySelectorAll('.current-cat-parent');
console.log(parent.length)
if (parent.length === 1) { // or > 0
document.querySelector('.hide-it').style.display = "none";
}
.current-cat-parent {
height: 100px;
width: 100px;
background: Red;
}
.hide-it {
height: 100px;
width: 100px;
background: blue;
}
<div class="current-cat-parent">
</div>
<div class="hide-it">
</div>
var parent = document.querySelectorAll('.current-cat-parent');
if(parent.length == 0){
document.querySelector('.hide-it').style.display = none;
}
If both of your HTML elements are sibling selectors, for example if you have something like below:
<div class="current-cat-parent">
</div>
---- other contents -----
<div class="hide-it">
</div>
Then you can simply achieve that using CSS only. Try this:
.hide-it {
display: none;
}
.current-cat-parent ~ .hide-it {
display: block;
}
You can do it also through css.
.current-cat-parent .hideit{ display:none; }
This code work when page has not current-cat-parent class
.hideit{ display:block; }
In my web application I am showing infoWindows in a google map.
The default design is very primitive and I would like to have something nicer.
Is there a css-stylesheet available that I can include, which provides nice styles for the infoWindows?
I haven't found anything useful so far.
Thanks!
Write Css for Info Window
<style type="text/css">
.info-win {
padding: 5px;
width: 350px;
overflow: hidden;
line-height: 1.8;
font-weight: bold;
margin: 0;
}
</style>
Create a string Which contain HTML elements and then set it as a content of info window.
var htmlcontent = '<div class="info-win"><span><p style="background:#CCDF31;padding:3px 5px;color:#000;">Info Win Design</p></span></div>';
var infowindow = new google.maps.InfoWindow({
content: htmlcontent
});
Hi I am trying to build a angular single page app for mobile that uses a map on one page. It also should include a sticky footer, and is based on bootstrap. The sticky footer css interferes with the css needed to get the map to take up all of the remaining screen space, so I add a class='map' to the html element to override certain css elements (see below).
Everything works nicely until I go to the map page, leave it and then return to the map page. In this instance the map is not working correctly at all. It is hard to describe, so please try the plnkr.
I have found CSS that works for the map reloading, but then that breaks something else in the site. It is driving me crazy trying to combine the two models, hence my appeal for help.
Update: I have now found that resizing the screen rectifies the rendering issues, until you leave and return to the map. Of course a mobile use cannot change their screen size, but this may help find a solution.
html {
position: relative;
min-height: 100%;
}
html.map {
height: 100%
}
body {
/* Margin bottom by footer height */
margin-bottom: 60px;
}
.map body {
/* For Google map */
height: 100%;
margin-bottom: 0;
padding-bottom: 60px;
padding-top: 60px
}
footer {
position: absolute;
bottom: 0;
width: 100%;
/* Set the fixed height of the footer here */
height: 60px;
background-color: #f5f5f5;
}
header {
width: 100%;
background-color: #ccc;
height: 60px;
top: 0;
}
.map header {
position: absolute;
}
UPDATE
I implemented a solution similar to yours, which I found in this blog article. Essentially, you have to trigger a resize event in order to have the map repainted correctly when it goes from hidden to visible.
But I put my code into a directive instead of a controller (doesn't bloat controller and decorates the element it affects), instead of adding a watcher it runs only after the directive/element is linked (more performant), and it doesn't require you to re-enter your coordinates in order to refresh:
.directive('autoRefresh', function($timeout){
return {
restrict: 'A',
link: function(scope, elem, attrs){
$timeout(function(){
var center = scope.map.getCenter();
google.maps.event.trigger(scope.map, "resize");
scope.map.setCenter(center);
});
}
}
})
Updated Plunker
OK, so what I was missing was to trigger the resize event. This now works perfectly in my plunker but not yet in my more complex actual code. Nearly there!
restosApp.controller('mapCtrl', function($scope) {
$scope.$watch('map', function() {
google.maps.event.trigger($scope.map, 'resize');
var ll = new google.maps.LatLng(52.374, 4.899);
$scope.map.setCenter(ll);
});
});
I just noticed that the gMap view tools are displaying…rather unusually. Their regions still seem to be properly defined—I can interact with them just fine, it's just their appearance that looks messed up.
I haven't applied any CSS to any of the map pieces, and the only css I've applied to the map container is width:100%; height:100%; z-index:0; (which I normally do).
I do have other elements on the page which have position:absolute; and position:fixed; and some high z-indexs (500 & 1000). Is it possible they are causing the visual distortion of the Map's tools?
I see the same weird visual distortion in the latest versions of Chrome, Chrome Canary, Ffx, Safari, and Opera (on Mac OSX).
I checked dev tools / firebug, and no unexpected CSS is being applied to the map's container or directly to its tools.
Here is the exact HTML (I stripped out the other elements and css and the weirdness still happens):
<html style="width:100%;height:100%;">
<head>
<link rel="stylesheet" href="shared/bootstrap/css/foundation.min.css">
<link rel="stylesheet" href="shared/bootstrap/css/v2.2.2.min.css">
<script
type="text/javascript"
src="http://maps.googleapis.com/maps/api/js?key=...">
</script>
<script type="text/javascript">
function ginit() {
var vancouver = new google.maps.LatLng(49.285415,-123.114982);
var mapOptions = {
center: vancouver,
zoom: 15,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(
document.getElementById("map"),
mapOptions
);
var infowindow = new google.maps.InfoWindow(),
marker;
}//ginit()
</script>
</head>
<body onload="ginit();" style="width:100%;height:100%;">
<div id="map" style="width:100%;height:100%;"></div>
</body>
</html>
EDIT: It appears the issue is coming from the combination of Foundation and Bootstrap: removing either one fixes the issue. Also it doesn't matter that no elements on the page reference classes from the libs, it causes the distortion all the same.
I tried to put this up in a fiddle, but I couldn't get jsfiddle.net to load.
For the future users who face same problem, here is the fix.
#map img{max-width: inherit;}
Like other answers said it is problem with max-width.
Bootstrap and Foundation set { img max-width:100% } for Google Maps canvases. This causes the Maps controls to appear distored. Alter the css to be max-width:none;. [source]
Caveat: Apparently img { max-width: 100% … } is integral for images auto-resizes for responsive layouts, so use with caution. [source]
Foundation 5 no only breaks gmap, it also breaks MapQuest. Luckily both Goomap & Quest have class to allow us to overload F5 behavious only for maps display.
.google-map {
height: 400px; // no default height
color: #191970; // default color for both text and background is white !!!
}
.quest-map {
height:400px;
color: #191970;
}
// Fix Foundation bug with MapQuest
.mqa-display {
img {max-width: none;}
label { width: auto; display: inline; }
}
// Fix Foundation bug with GoogleMap
.gm-style {
img { max-width: none; }
label { width: auto; display: inline; }
}