Google Javascript Map API在VS 2017中可用，但发布到Azure时不起作用

Question

我有一个ASP.NET Core 2.2网站，该网站使用google地理编码api和地图javascript API从地址创建地图。它可以在Visual Studio 2017中运行，但是当我将其发布到Azure时，它将不再起作用。该地图没有出现。开发者控制台未显示任何错误。

我使用地理编码API从街道地址生成latlong。我添加了一条调试语句，以确认我已成功与api通讯，而且确实早已停滞。

网站为http://americanhorseproperties.com

<div id="map">


</div>

<a asp-page="./Index">Back to Gallery</a>

<input type="hidden" id="address" value="@Model.house.address 
@Model.house.city" />

<script>

// Initialize and add the map
function initMap() {
var geocoder = new google.maps.Geocoder();

//gets address from the address hidden input element in body
var address = document.getElementById('address').value; 

//geocodes address and gets latlong 
geocoder.geocode({ 'address': address }, function (results, status) {

if (status == 'OK') {
            console.log('location: Longitude: ', 
            results[0].geometry.location.lng());
            console.log('location: Latitude: ', 
            results[0].geometry.location.lat());

var map = new google.maps.Map(document.getElementById('map'), { zoom: 14, 
center: results[0].geometry.location });   
var marker = new google.maps.Marker({ map: map, position: 
results[0].geometry.location }); //sets marker at new lat long

} else {
            alert('Geocode was not successful for the following reason: ' + 
status);
        }

    });

}


</script>

<script async defer
    src="https://maps.googleapis.com/maps/api/js? 
    key=KEY_REMOVED&callback=initMap">

</script>

Answer 1

似乎您需要为<div id="map">设置“ height”属性

Answer 2

CSS问题。

Google Maps API自动添加CSS属性“位置：相对；溢出：隐藏；”到用于显示地图的div。当我在浏览器的开发人员控制台中手动删除这两个属性中的任何一个时，该地图将变为可见。

确保div的大小足以容纳地图。