Googleマップのモバイルフレンドリーマップを作成するにはどうすればよいですか？

Question

私はGoogleマップマップのサイズに問題があります。
私が望むのは、マップと段落の段落の幅を100％にすることです。あなたが見ることができるようにそれは、コンピュータ上で動作します

：画像を参照してください。しかしそれは応答幅ではなく、それが問題です。

CSS：私は100％にmap_canvasの幅を変更した場合

#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> 

結果は〜100ピクセルです。
map_canvasと段落を100％幅で保持するdivを作成しようとしましたが、マップの幅をXX％に設定しましたが、xx pxとして解釈されました。

マップが800ピクセル幅であるため、モバイルで使用するのが非常に難しくなります。それが解決策であれば、map_canvasはモバイルの段落の上にあります。
私はコンピュータ上で800pxと携帯電話100％と言う幅が必要です。

EDIT：

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

は次のようになります。

EDIT：
CSSパネル

#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; 
    } 

パネルを使用すると、画像上で参照ボタンで、Panel2はAですボタンを押すと表示されます地図上を一度クリックすると、最初のボタンの右に配置されます。

Answer 1

これを試してみてください：

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

は、このヘルプを願っています。

Answer 2

CSSにCSS3 @mediaタグを使用できます。それらを含めると、デバイスの画面サイズに応じて地図の幅を設定することができます。どのデバイスが使用されているかを判断する場合は、thisサイトを詳しく見てください。ファイルに定義されている条件に応じて、CSSの特定の部分が含まれるかどうかを定義することができます。これを含めた後、あなたのCSSファイルは、次のようになります。

@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*/ 
    } 
} 

あなたはthisサイトでこのトピックについての詳細を読むことができます。あなたもこのようなあなたの<link>タグ内のメディアのタグを含めることができ

注：

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

詳細については、あなたはthisサイト上で詳しく見ていく必要があります。

どのデバイスが使用されているかを判断する別の方法は、jQuery,JavaScriptまたはPHPを使用することです。現在のモバイルデバイスブラウザはCSS3を使用できるはずなので、メディアタグを使用することをお勧めします。