Javascript 我如何使谷歌地图移动友好？

我对谷歌地图的大小有问题。 我想要的是地图和div段落的100%宽度。如图所示：

正如你所看到的，它在计算机上工作。但它不是响应宽度，这就是问题所在

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>

变成：

编辑： 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;
    }

Panel是您在图像上看到的按钮，Panel2是您在地图上单击一次时出现的按钮，位于第一个按钮的右侧。

尝试以下操作：

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

希望有帮助。

您可以在CSS中使用CSS3@media标记。包括那些可以根据设备屏幕大小设置地图宽度的内容。如果您想确定使用哪种设备，请仔细查看站点。根据文件中定义的条件，您可以定义特定规则，在这些规则之后是否包含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*/
    }
}

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 800px)" href="small-device.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*/
    }
}

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

有关更多信息，请仔细查看网站

---

确定使用哪个设备的另一种方法是使用或。由于当前的移动设备浏览器应该能够使用CSS3，我建议使用媒体标签

你的面板宽度如何？地图画布遵循面板的宽度。面板是地图上的按钮，我认为它不会解决这个问题。很抱歉，现在看到您的编辑。我的坏心情会被折磨。不是面板，而是.google\u地图类。地图画布的宽度为.google\u mapYES！！成功了！编辑你的答案，它就是你的！：-是，设置谷歌地图的宽度。并使用我在上面发布的map_画布的css。完成了吗？我会注意的！我从来没用过。不确定我是否知道如何实施itI更新了我的答案。我希望现在更容易理解。