I loaded Google Maps API v3 and print Google Map in div. But when set width & height to 100% and auto I can't see the Map.
Here is HTML code snippet.
<!-- Maps Container -->
<div id="map_canvas" style="height:100%;width:100px;margin:0 auto;"></div>
Is there a way to fix this issue?
You have to set all parent containers to a 100% width if you want to cover the whole page with it. You have to set an absolute value at width and height for the #content div at the very least.
body, html {
height: 100%;
width: 100%;
}
div#content {
width: 100%; height: 100%;
}
Setting Map Container to position to relative do the trick. Here is HTML.
<body>
<!-- Map container -->
<div id="map_canvas"></div>
</body>
And Simple CSS.
<style>
html, body, #map_canvas {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#map_canvas {
position: relative;
}
</style>
Tested on all browsers. Here is the Screenshot.
Very few people realize the power of css positioning. To set the map to occupy 100% height of it's parent container do following:
#map_canvas_container {position: relative;}
#map_canvas {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
If you have any non absolutely positioned elements inside #map_canvas_container they will set the height of it and the map will take the exact available space.
If you can't affect your parents elements (like in a nested components situation) you can use height: 100vh which will make it a full window (=view) height;
This Work for me.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#cont{
position: relative;
width: 300px;
height: 300px;
}
#map_canvas{
overflow: hidden;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=APIKEY"></script>
<script type="text/javascript">
function initialize() {
console.log("Initializing...");
var latlng = new google.maps.LatLng(LAT, LNG);
var myOptions = {
zoom: 10,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"),
myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="cont">
<div id="map_canvas" style="width: 100%; height: 100%;"></div>
</div>
</body>
</html>
You can set height to -webkit-fill-available
<!-- Maps Container -->
<div id="map_canvas" style="height:-webkit-fill-available;width:100px;"></div>
Gmap writes inline style position to relative to the div. Overwrite that with :
google.maps.event.addListener(map, 'tilesloaded', function(){
document.getElementById('maps').style.position = 'static';
document.getElementById('maps').style.background = 'none';
});
Hope it helps.
Better late than never! I made mine a class:
.map
{
position:absolute;
top:64px;
width:1100px;
height:735px;
overflow:hidden;
border:1px solid rgb(211,211,211);
border-radius:3px;
}
and then
<div id="map" class="map"></div>
If that div is the only thing on your page, set:
body, html {
height: 100%;
width: 100%;
}
I struggled a lot to find the answer.
You don't really need to do anything with body size. All you need to remove the inline style from the map code:
<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.co.uk/maps?f=q&source=s_q&hl=en&geocode=&q=new+york&aq=&sll=53.546224,-2.106543&sspn=0.02453,0.084543&ie=UTF8&hq=&hnear=New+York,+United+States&t=m&z=10&iwloc=A&output=embed"></iframe><br /><small>View Larger Map</small>
remove all the inline style and add class or ID and then style it the way you like.
This worked for me.
map_canvas {position: absolute; top: 0; right: 0; bottom: 0; left: 0;}
I just added inline style .
<div id="map_canvas" style="width:750px;height:484px;"></div>
And it worked for me .
Related
I have a full screen Google Maps Div, and I added an Input to be used as a searchbox. This is the code:
<style>
html, body {
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
position: fixed;
}
.container, .container > div, .container > div #map {
height: inherit;
}
.mapcanvas {
display: block;
position:absolute;
height:100%;
bottom:0;
top:0;
left:0;
right:0;
margin-top:0px; /* adjust top margin to your header height */
}
</style>
<body onload="initializeMap()">
<div id="map" class="mapcanvas"></div>
<input class="form-control" placeholder="Insert the place you are looking for" type="text" id="input_location">
</div>
</body>
<script>
function initializeMap() {
map = new google.maps.Map(document.getElementById("map"),
{
tilt:0
,center:new google.maps.LatLng(41.946, 13.499)
,zoom:7
,mapTypeId: google.maps.MapTypeId.SATELLITE
,mapTypeControlOptions: {
style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
position: google.maps.ControlPosition.BOTTOM_CENTER
}
}
);
const input = document.getElementById("input_location");
const searchBox = new google.maps.places.SearchBox(input);
map.controls[google.maps.ControlPosition.TOP_CENTER].push(input);
}
</script>
When I open this page on the smartphone, the searchBox is very, very small.
How can I control the size of this? I tried with Bootstrap classes class="form-control form-control-lg" and with style="font-size:36px" but nothing happens.
Any ideas?
This is the problem with the responsiveness of your webpage. A mobile browser is rendering your website as a desktop website.
To eliminate this problem simply insert
<meta name="viewport" content="width=device-width, initial-scale=1.0">
in the <head>...</head> of your homepage.
Output
There is also a suggestion for you. If your page looks like what you have shared above then make some changes to it.
Put the <script>...</script> inside the <body>...</body>and don't forget to include <html>, <head> etc to your webpage.
The problem was not directly related to Google maps API.
It was related to a web forward that uses an iframe tag.
This causes the mobile browser to render the desktop version of the page.
I have a solution with Bootstrap 3. I have a header and footer with a full-width container in between. In this full width container I need to embed a Google Map full height of the browser but above the map is some content e.g a heading or a toggle switch.
[Edit] The header and footer are fixed height and fixed to the top and bottom of the browser. The middle part of the browser I wish to fill the remaining space.
I have found this solution which fills the page nicely but I can't get a heading above the map.
https://stackoverflow.com/a/27301088/285457
Thanks in advance.
$(function() {
var mapDiv = document.getElementById("map_canvas");
/// Set control options for map
var zoptions = {
position: google.maps.ControlPosition.TOP_RIGHT,
style: google.maps.ZoomControlStyle.SMALL
};
/// Position of map using coord that were passed else do nothing.
var pos = new google.maps.LatLng(40.716948, -74.003563);
/// Set basic map options using above control options
var options = {
zoom: 10,
zoomControlOptions: zoptions,
mapTypeId: google.maps.MapTypeId.TERRAIN,
center: pos
};
this.map = new google.maps.Map(mapDiv, options);
})
html,body,.container-fluid,#map_canvas {
height: 100%;
}
.container-fluid {
width: 100%;
position: absolute;
top: 0;
padding: 0;
}
#map_header {
height:50px;
}
#map_canvas {
border-top: 50px solid #fff;
border-bottom: 20px solid #fff;
bottom:50px;
}
header {
height: 50px;
}
footer {
height: 20px;
}
#map-container {
position: fixed;
top: 50px;
left: 0;
bottom: 50px;
right: 0;
}
<header class="hidden-print">
<div class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">menus etcs</div>
</div>
</header>
<div class="container-fluid" id="map-container">
<div id="map_header">This is part of the map content</div>
<div id="map_canvas" class="map_canvas"></div>
</div>
<footer class="navbar-default navbar-fixed-bottom">
<div class="row">footer stuff</div>
</footer>
Here's the fiddle > https://jsfiddle.net/johnny5a/vnr03ufs/6/
Based on the info I got from comments here is a solution
When you put position fixed on the map it is removed from the flow of the document and it won't be attached to anything but the browser itself. You need to modify your CSS a bit
body {
position: relative;
overflow: hidden;
}
Also your container-fluid needs this CSS
.container-fluid{
position: absolute;
top: 0;
padding: 0;
width: 100%;
height: 100%;
}
This should fix the problem.
You can read about positioning here and here
So my problem is that I have set my view to be width & height 100%; which works well but once some of the content within the view causes a scrollbar to appear it scrolls into whitespace. As if the view's overflow is hidden but the content is still making the page scroll.
I was unable to make a fiddle since I required multiple html files to load and render views so Ill post some code and images about the issue and hopefully someone can catch the problem. I suspect it is most likely a CSS issue with my positioning system but I have been unable to resolve it.
::HTML::
!!!this is the Index page
<!DOCTYPE html>
<html ng-app="appMain">
<head>
<title>MY APP</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" >
<!-- CSS imports -->
<link href="css/style.css" rel="stylesheet" type="text/css" />
<!-- JS imports -->
<!-- Angular JS Primary Scripts -->
<script src="scripts/angular.js"></script>
<script src="scripts/angular-ui-router.js"></script>
<!-- Angular JS subScripts for controllers etc. -->
<script src="main.js" ></script>
</head>
<body>
<div class="makeBackground" ui-view></div>
</body>
</html>
!!!!this is the sign-in.html page:
<div class="loginBackground makeBackground"></div>
<div class="transparentContainer">
</div>
::JS - Module::
(function() {
var appMain = angular.module('appMain', ['ui.router']);
swiftMain.config(function($stateProvider, $urlRouterProvider) {
// if url not defined redirect to login
$urlRouterProvider.when('', "/sign-in");
// if nonexistant url defined redirect to sign-in
$urlRouterProvider.otherwise("/sign-in");
// Now set up the states
$stateProvider
.state('sign-in', {
url: "/sign-in",
templateUrl: "templates/views/sign-in.html"
});
});
}());
::CSS::
.makeBackground {
position: relative; top: 0;
width: 100%; height: 100%;
}
.geminiBlue {
background-color: #074d77;
}
/* fancy 'e' bg on login background and courselist */
.loginBackground {
background-image: url(../images/login_back.png), url(../images/geminiBlue.png);
background-position: center top, left top;
background-repeat: no-repeat, repeat;
}
.transparentContainer {
border-radius: 20px;
background-color: rgba( 255,255,255,0.4 );
width: 500px;
height: 600px;
position:absolute;
z-index:15;
top:50%;
left:50%;
margin:-300px 0 0 -250px;
}
the CSS above shows that the transparentContainer class has a fixed width and height that will create a scroll at lower resolutions; but the view allows the scroll and hides the content as can be seen below here:
How to get the view to expand with the content within it?
position: absolute; is your friend.
.makeBackground {
position: absolute;
top: 0;
width: 100%; height: 100%;
}
.geminiBlue {
background-color: #074d77;
}
/* fancy 'e' bg on login background and courselist */
.loginBackground {
background-image: url(http://www.w3.org/html/logo/downloads/HTML5_Logo_512.png);
background-color:#00D;
background-position: center top, left top;
background-repeat: no-repeat, repeat;
}
.transparentContainer {
border-radius: 20px;
background-color: rgba( 255,255,255,0.4 );
width: 70%;
height: 70%;
position:absolute;
z-index:15;
margin: 15%; /*-300px 0 0 -250px;*/
}
<div class="makeBackgrounnd" >
<div class="loginBackground makeBackground">
<div class="transparentContainer"> </div>
</div>
</div>
Resolved:
The Issue was the css. by setting the top level containers overflow property to hidden and using margins instead of position: relative; with pixel adjusts my content now fits within the page.
I've been working on pre-made web templates for almost a year now and I started off by making one of my own from scratch in PSD.
The Website can be located here:
http://gamelabs.webege.com/
My first time chopping a PSD to HTML/CSS as well. Nonetheless I got the thing to work on my laptop and I got it going until I viewed on multiple other browsers (Mac/iPad/Android) etc.
The whole thing got messed up and I have been searching for almost 3 days now still without a solution.
Have tried wrapping the website in margin: 0;, using other techniques like min/max-width, using positioning and still its aligned out, showing a bottom scroll on many browser screens but my own computer. Not going with overflow here because I can hide the scroll but the website is cut.
This is my first time going ahead with a website from scratch and I'm stuck at the ground level still.
I would also like to mention that I'm not planning to build a Responsive WD with grid.less or bootstrap, I just want the website to equally align on any browser window opened and be fluid in width.
An excerpt from my choppy CSS is as:
body {
margin: 0;
padding: 0;
background-color:#000;
}
#wrapper {
margin: 0 auto;
position:relative;
width: 100%;
}
#bottombar
{
left: 0px;
top: 750px;
position: absolute;
width: 100%;
height: 200px;
z-index:1;
background:url(images/foot.png) repeat-x;
}
#bottombarglow
{
left: 260px;
top: 733px;
position: absolute;
width: 800px;
height: 51px;
z-index:2;
background:url(images/bottombarglow.png);
}
#topbar
{
left: 0px;
top: 0px;
position: absolute;
width: 100%;
height: 82px;
z-index:3;
background:url(images/tb.png)repeat-x;
}
#blueline
{
left: 80px;
top: 648px;
position: absolute;
width: 1200px;
height: 2px;
z-index:4;
background:url(images/blueline.png);
}
#bullets
{
left: 100px;
top: 660px;
position: absolute;
width: 860px;
height: 87px;
z-index:5;
background:url(images/gallery_left.png);
}
#gallerybutton
{
left: 980px;
top: 670px;
position: absolute;
width: 257px;
height: 67px;
z-index:6;
background:url(images/gallery.png);
}
#menu
{
left: 840px;
top: 14px;
position: absolute;
width: 450px;
height: 54px;
z-index:7;
background:url(images/menu.png);
}
#footer
{
left: 156px;
top: 810px;
position: absolute;
z-index:8;
width: 400px;
height: 98px;
background:url(images/footer.png);
}
#logo
{
position: absolute;
width: 237px;
height: 156px;
z-index:9;
background:url(images/logo.png);
}
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type"/>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<!-- Title and CSS -->
<title>Game Art Labs | Play for Fun</title>
<link href="styles.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="bootstrap.min.css">
<!-- Fav and touch icons -->
<link rel="icon" href="http://appbuzzsolutions.com/gal/favicon.png" type="image/png">
</head>
<body>
<div id="wrapper">
<div id="logo"></div>
<div id="topbar"></div>
<div id="menu"></div>
<div id="bullets"></div>
<div id="gallerybutton"></div>
<div class="clearfix"></div>
<div id="blueline"></div>
<div id="bottombarglow"></div>
<div id="footer"></div>
<div id="bottombar"></div>
<!-- BG SLIDER -->
<!-- set the active class on whichever image you want to show up as the default
(otherwise this will be the last image) -->
<div id="slideshow">
<img src="images/bg1.png" alt="Slideshow Image 1"/>
<img src="images/bg2.png" alt="Slideshow Image 2" />
<img src="images/bg3.png" alt="Slideshow Image 3" />
<img src="images/bg4.png" alt="Slideshow Image 4" />
<img src="images/bg5.png" alt="Slideshow Image 5" />
<img src="images/bg6.png" alt="Slideshow Image 6" class="active" />
</div>
<!-- Java Starts -->
<script src="bootstrap.min.js"></script>
<script src="jquerry.js" type="text/javascript"></script>
<script type="text/javascript">
function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
// use this to pull the images in the order they appear in the markup
var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');
// uncomment the 3 lines below to pull the images in random order
// var $sibs = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next = $( $sibs[ rndNum ] );
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 4000 );
});
</script>
<!-- Java Ends -->
</div>
</body>
</html>
This is starting to eat my nerves a bit I would confess. The mistake here must be very basic but my knowledge is too. Hope someone can help me around with us. Will reply to any query.
Advance Thanks!
PS: I was inspired from Kabam.com while designing this.
If your trying to actually define the width of the whole webpage window, you need to do something like this:
body {
width: 1600px; //You can set it to any width
padding: 0px;
background-color:#000;
}
Something simpler might be to add px after your measurements, otherwise, it won't know the unit of measurement, so it is void. Think of it like this. The world is about 250,000 long. Centimeters, or light years?
If your trying to change the margin of the page, you should do this:
body {
width: 1000px; //You can set it to any width
margin: auto; //Auto will automatically center the whole page
padding: 0px; //Don't forget px!
background-color:#000;
}
I'm trying to animate the height of an element after a class has been applied, here's the simplified code:
HTML
<div class="section">
<div class="panel">
Click
<div class="panel-content">
Some content...
</div>
</div>
</div>
CSS
.section {
position: relative;
width: 500px;
height: 200px;
margin: 100px auto;
background: #ccc;
}
.panel {
width: 65%;
position: absolute;
left: 0;
bottom: 0;
}
.toggle {
display: inline-block;
height: 15px;
background: #ddd;
}
.panel-content {
max-height: 0;
overflow: hidden;
transition: max-height 1s;
}
.active .panel-content {
max-height: 9999px;
}
JS
$(function() {
$('.toggle').on('click', function (e) {
e.preventDefault();
$(this).closest('.panel').toggleClass('active');
});
});
When I click the .toggle link an active class is set on the .panel element to animate the .panel-content height, however when the class is first added the content is shown without animation and when it's removed the element takes one second (the transition's duration) to start animating. You can see a live demo here: http://codepen.io/javiervd/pen/bLhBa
I tried to play with the position and overflow properties as well but I couldn't make it work, maybe there's another way of achieving the same effect?
Thanks in advance.
You need to do a transition when something happens. This isn't what you want, but let me show you something:
.pannel-content{
height:0;
}
.pannel-content:hover{
height:50px; transition:height 2s;
}
This is how transition works. You have not created an action. There is no click Pseudo Class, and you don't want to effect the same element anyways. Try using jQuery, like.
<html>
<head>
<style type='text/css'>
.active .pannel-content{
display:none; height:9999px;
}
</style>
</head>
<body>
<div class='section'>
<div class='panel'>
<a href='#' class='toggle'>Click</a>
<div class='panel-content'>
Some content...
</div>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type='text/javascript'>
$('.toggle').click(function(){
$('.active .pannel-content').show('slow');
});
</script>
</body>
</html>
You could also use jQuery's .animate() method. Of course I would recommend that you use declair a DOCTYPE and use <meta> tags. Also you should use external CSS, as it would be cached in your users Browser memory.
Visit http://api.jquery.com/show/ and http://api.jquery.com/animate/ for details.