为什么谷歌地图没有出现[重复]答案

【问题标题】：Why google map doesn't appear [duplicate]为什么谷歌地图没有出现[重复]
【发布时间】：2019-11-19 08:28:30
【问题描述】：

我正在使用谷歌地图反向地理编码，但我的地图没有显示在我的网站上。我复制了我的示例代码及其工作，当我将它粘贴到我的网站文件（带模板）时它没有显示

这是代码

<div id="map" style="width:50%;height:100%;"></div>

这是我的脚本

       <script>
            function initMap() {
          var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 17,
          center: {lat: 16.0130425, lng: 120.35724399999998}
        });
        var geocoder = new google.maps.Geocoder;
        var infowindow = new google.maps.InfoWindow;

        document.getElementById('go').addEventListener('click', function() {
          geocodeLatLng(geocoder, map, infowindow);
        });
      }
      function geocodeLatLng(geocoder, map, infowindow) {
        var input = document.getElementById('latlng').value;
        var latlngStr = input.split(',', 2);
        var latlng = {lat: parseFloat(latlngStr[0]), lng: parseFloat(latlngStr[1])};
        geocoder.geocode({'location': latlng}, function(results, status) {
          if (status === 'OK') {
            if (results[0]) {
              map.setZoom(17);
              var marker = new google.maps.Marker({
                position: latlng,
                map: map,
              });
              infowindow.setContent(results[0].formatted_address);
              infowindow.open(map, marker);
            } else {
              window.alert('No results found');
            }
          } else {
            window.alert('Geocoder failed due to: ' + status);
          }
        });
      }
  </script>

我在 header.php 中有我的 API

但是当我签入我的“检查元素”时，div 地图中有一个数据包含在我的示例代码中

【问题讨论】：

以像素为单位给出地图元素高度 -
谢谢老兄。你帮了我很多。你能解释一下为什么百分号在高度上不起作用吗？
如果有用就采纳答案
重复Google Maps API map doesn't appear 和其他几十个问答。

标签： javascript google-maps

【解决方案1】：

<div id="map" style="width:50%;height:100px;"></div>

将高度更改为 px 或为父级指定高度或使用 cal

百分比是相对于高度计算的生成框的包含块。如果包含的高度块没有明确指定（即，它取决于内容高度），并且这个元素不是绝对定位的，值计算为自动。根元素上的百分比高度是相对的到初始包含块。

更多参考check

【讨论】：