Google map container with a frame around

HTML & CSS
1

Hi,
I want to set up a frame around a div with a google map inside
I’ve tried like this:

HTML

<div id="viewContainer"></div>
<div id="bar-top"></div>
<div id="bar-right"></div>
<div id="bar-bottom"></div>
<div id="bar-left"></div>

CSS

html, body {
	margin: 0;
	padding: 0;
	border: 0;
	height: 100%; 
	width: 100%;
	background-color: #607D8B;
	position: relative;
}
#viewContainer { 
	height: 100%; 
	width: 100%;
}
#bar-top{
	background-color: #CFD8DC;
	position: absolute;
	left: 0px;
	top:0;
	height: 50px;
	width: 100%;
}
#bar-bottom{
	background-color: #CFD8DC;
	position: absolute;
	left: 0;
	bottom:0;
	height: 50px;
	width: 100%;
}
#bar-right{
	background-color: #CFD8DC;
	position: absolute;
	right: 0;
	top:0;
	height: 100%;
	width: 50px;
}
#bar-left{
	background-color: #CFD8DC;
	position: absolute;
	left: 0;
	top:0;
	height: 100%;
	width: 50px;
}

but in this way I’ve got part of the map hidden by
the frame.

How can set up a frame around a map without hidden the content ?

2

The iframe is restricted to the viewcontainer. You have it set to 100% height and width. Make those min-height/width? Could you provide a link so I can play with it?

3

Thanks for help
here it is

BTW there is no iframe is just
a picture frame for the map :smile:

4

If I understand you correctly, you want to zoom out as you get smaller so that none of the content that WOULD be missing, is missing? I do not believe this is possible. I did some searching and was unable to find anything.

5

I’ve to set up a frame (with custom actions like user account, map lat lon, may be a modal and so on) around sort of 3D map build
with threejs so I want that deploy.

6

Hi,

If you just want a 50px border around the map then just do this.

html,body{height:100%;margin:0;padding:0}
#frame-container {
    background-color: #607D8B;
    position: relative;
    height: 100%;
    width: 100%;
    border:50px solid red;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}
#map-container {
    height: 100%;
    width: 100%;
}



 <div id="frame-container">
            <div id="map-container"></div>
 </div>
7

Thanks @PaulOB
but I need 4 containers around the map to put in them
some actions bind to buttons.
For instance a button to put a marker or show a modal with an help section.
Even if in this case I don’t know how to do this I’m not a newbie :slight_smile:
PaulOBAdvisor

      7m  #6
8

What about ?

#map-container { 
    margin: 0 auto;
    height: -moz-calc(100% - 50px);
    width: -moz-calc(100% - 50px);
}

It’s not perfect but certainly better :smile:

9

Even if this did work (I doubt very much that it will) that will only work for mozilla browsers (FF). Just use the regular calc function without vendor extensions. Look at the support here.

10

Thanks @RyanReese it was just an example
to see what do you think about and as I stated
before it workish ^^ if there was a better solution it’ll be welcome …

11

You can still do that as you did before and just absolutely place them on top of the border I created. The div I created takes care of the map.

No need for calc just use box-sizing as shown in my example. That will allow for the borders to be inside the 100%. You can then use that space for your controls around the map.

e.g.

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
html, body {
    height:100%;
    margin:0;
    padding:0
}
#frame-container {
    background-color: #607D8B;
    position: relative;
    height: 100%;
    width: 100%;
    border:50px solid red;
    -moz-box-sizing:border-box;
    -webkit-box-sizing:border-box;
    box-sizing:border-box;
}
#map-container {
    height: 100%;
    width: 100%;
}
#bar-top,#bar-right,#bar-bottom,#bar-left{
    position:absolute;    
}
#bar-top,#bar-bottom{left:-50px;right:-50px;height:50px;background:green}
#bar-top{top:-50px}
#bar-bottom{bottom:-50px}
#bar-left,#bar-right{top:0px;bottom:0px;width:50px;background:blue;}
#bar-left{left:-50px}
#bar-right{right:-50px;}


</style>
</head>

<body>
<div id="frame-container">
        <div id="map-container"></div>
        <div id="bar-top"></div>
        <div id="bar-right"></div>
        <div id="bar-bottom"></div>
        <div id="bar-left"></div>
</div>
</body>
</html>

Of course you would need to be careful what content you put inside those absolute elements because you don’t want them overflowing…

12

[quote=“PaulOB, post:11, topic:112657”][/quote]
Thanks :smile:

13
1 Like
14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.