为什么谷歌地图没有出现

Question

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

这是代码

<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

但是当我签入我的"Inspect Element"时，div映射有一个数据，它在我的示例代码中

Answer 1

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

将高度更改为px或将高度赋予父对象或使用cal

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

有关更多参考，请检查