Javascript 为什么谷歌地图没有'；不出现

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

这是密码

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

函数initMap（）{
var map=new google.maps.map（document.getElementById（'map'）{
缩放：17，
中心：{lat:16.0130425，lng:120.357243999998}
});
var geocoder=new google.maps.geocoder；
var infowindow=new google.maps.infowindow；
document.getElementById（'go'）。addEventListener（'click'，function（）{
geocodeLatLng（地理编码器、地图、信息窗口）；
});
}
功能geocodeLatLng（地理编码器、地图、信息窗口）{
var输入=document.getElementById（'latlng'）。值；
var latlngStr=input.split（'，'，2）；
var-latlng={lat:parseFloat（latlngStr[0]），lng:parseFloat（latlngStr[1]）；
geocoder.geocode（{'location'：latlng}，函数（结果，状态）{
如果（状态=='OK'）{
如果（结果[0]）{
map.setZoom（17）；
var marker=new google.maps.marker({
位置：latlng，
地图：地图，
});
infowindow.setContent（结果[0]。格式化的\u地址）；
信息窗口。打开（地图、标记）；
}否则{
window.alert（“未找到结果”）；
}
}否则{
window.alert（'地理编码器由于：'+状态而失败）；
}
});
}

我在header.php中有API

但是，当我签入“Inspect Element”时，div映射有一个数据，该数据包含在示例代码中

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

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

cal

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

---

更多参考

以像素为单位给出地图元素高度-谢谢你。你帮了我很多。你能解释一下为什么百分号在高度上不起作用吗？如果它是有用的，请接受答案，重复和其他几十个问答。