Andreas Andreas - 6 months ago 42
CSS Question

How do I make google maps map mobile friendly?

I have a problem with the size of the google maps map.

What I would like is to have 100% width of the map and div paragraph. See image:

enter image description here

It works on computers as you can see. But it's not responsive width, and that is the problem.

CSS:

#map_canvas { // the map
height:600px;width:800px;
}
.google_map {
position:relative;
float: left;
}
.paragraph { // text and stuff on the right
float: left;
padding-left:5px;
display: inline;
}


HTML

<div class="google_map">
<div id="panel">
<div ><input onclick="deleteMarkers();" type=button value="Rensa"></div>
</div>
<div id="facit"></div>

<div id="map_canvas"></div>
</div>

<div class="paragraph">
blablabla
</div>


If I change the width of map_canvas to 100% the result is ~100 px.

I tried to create a div that holds both map_canvas and paragraph with the width 100% and then to set width of the map to XX% but that again got interpreted as xx px.

Because the map is 800 px wide it becomes very hard to use on mobiles, I have no problem with map_canvas comes above paragraph on mobiles if that is a solution.

In short I need on computers the width to be say 800px and on mobiles 100%.

EDIT:

#map_canvas {
width:100%;
min-height:600px;
}


Becomes:

enter image description here

EDIT:

CSS panel

#panel {
position: absolute;
top: 10px;
left: 65%;
margin-left: -180px;
z-index: 5;
background-color: #000;
padding: 5px;

}
#panel, .panel {
font-family: 'Roboto','sans-serif';
line-height: 20px;
padding-left: 5px;
}

#panel select, #panel input, .panel select, .panel input {
font-size: 15px;
}

#panel select, .panel select {
width: 100%;
}

#panel i, .panel i {
font-size: 12px;
}

#panel2 {
position: absolute;
top: 10px;
left: 73%;
margin-left: -180px;
z-index: 5;
background-color: #000;
padding: 5px;

}
#panel2, .panel {
font-family: 'Roboto','sans-serif';
line-height: 20px;
padding-left: 5px;
}

#panel2 select, #panel2 input, .panel select, .panel input {
font-size: 15px;
}

#panel2 select, .panel select {
width: 100%;
}

#panel2 i, .panel i {
font-size: 12px;
}


Panel is the button you see on the image, Panel2 is a button that appears when you click once on the map, positioned to the right of the first button.

Answer

Try this:

#map_canvas {
        width:100%;
        min-height:600px;
}

Hope this help.