Google Maps API 响应式搜索框答案

【问题标题】：Google Maps API responsive searchboxGoogle Maps API 响应式搜索框
【发布时间】：2021-09-02 08:55:41
【问题描述】：

我有一个全屏的 Google Maps Div，我添加了一个输入用作搜索框。这是代码：

<style>
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 100%;
    position: fixed;

}
.container, .container > div, .container > div #map {
    height: inherit;
}
.mapcanvas {
    display: block;
    position:absolute;
    height:100%;
    bottom:0;
    top:0;
    left:0;
    right:0;
    margin-top:0px; /* adjust top margin to your header height */
}
</style>
<body onload="initializeMap()">
            <div id="map" class="mapcanvas"></div>
            <input class="form-control" placeholder="Insert the place you are looking for" type="text" id="input_location">
    </div>        
</body>
<script>
      function initializeMap() {
            map = new google.maps.Map(document.getElementById("map"),
                    {  
                      tilt:0
                      ,center:new google.maps.LatLng(41.946, 13.499)
                      ,zoom:7
                      ,mapTypeId: google.maps.MapTypeId.SATELLITE
                       ,mapTypeControlOptions: {
                          style: google.maps.MapTypeControlStyle.HORIZONTAL_BAR,
                          position: google.maps.ControlPosition.BOTTOM_CENTER
                        }
                    }
                );
                const input = document.getElementById("input_location");
                const searchBox = new google.maps.places.SearchBox(input);
                map.controls[google.maps.ControlPosition.TOP_CENTER].push(input);

      }
    </script>

当我在智能手机上打开这个页面时，搜索框非常非常小。我怎样才能控制这个的大小？我尝试使用 Bootstrap 类 class="form-control form-control-lg" 和 style="font-size:36px"，但没有任何反应。

有什么想法吗？

【问题讨论】：

标签： css google-maps-api-3 responsive-design responsive

【解决方案1】：

这是您网页响应速度的问题。移动浏览器将您的网站呈现为桌面网站。

要消除这个问题，只需插入

<meta name="viewport" content="width=device-width, initial-scale=1.0">

在您主页的<head>...</head> 中。

输出

还有一个建议给你。如果您的页面看起来像您在上面分享的内容，请对其进行一些更改。

将<script>...</script> 放在<body>...</body> 中，不要忘记在您的网页中添加<html>、<head> 等。

【讨论】：

我已经有了 meta 标签和所有其他标签（html、head、body、ecc），但是 iPhone 上的 Safari 上的输入框非常小。如果我在 PC 上的 Chrome 中运行该页面并在开发人员工具中选择智能手机，它会显得更大......
你加入了meta name=''viewport"吗？如果是，请分享屏幕截图。

【解决方案2】：

该问题与 Google 地图 API 没有直接关系。它与使用 iframe 标记的网络转发有关。这会导致移动浏览器呈现页面的桌面版本。

【讨论】：