Google 地图 API 响应式搜索框

Question

我有全屏 Google 地图 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" 但没有任何反应。

有什么想法吗？

Answer 1

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

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

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

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

输出

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

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

Answer 2

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

Google 地图 API 响应式搜索框

Google Maps API responsive searchbox

css

google-maps-api-3

responsive-design

responsive

输出