How do I make google maps map mobile friendly?

Question

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:

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:

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 1

Try this:

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

Hope this help.

Answer 2

You could use CSS3 @media tags in your CSS. Including those you are able to set the width of your map according to the screen size of the device. Take a closer look to this site if you want to determine which device is used. You can define specific rules after which certain parts of your CSS are included or not, depending on the conditions you define in your file. After including this your css file could look like this:

@media (max-width: 800px) {
    #map_canvas{
        /*youre custom style for devices which have a maximum 
          screen size of 800px and therefore 
          can not display your map correctly*/
    }
}

You can read more about this topic at this site.

Note that you can also include media tags in your <link> tag like this:

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 800px)" href="small-device.css" />

For more information you should take a closer look on this site.

Another way to determine which device is used is to use jQuery, JavaScript or PHP. Since current mobile device browsers should be able to use CSS3 I would recommend to use the media tags.