Asp.net mvc Google地图未显示在ASP.MVC站点中

我需要一些在应用程序中实现谷歌地图的帮助。我已经使用Localhost对此进行了测试，映射立即返回。我遇到的问题是，当我将其部署到azure平台时，地图需要一段时间才能恢复。有时必须多次刷新页面才能加载页面

我已经生成了一个GoogleWebAPI密钥，并反复检查了很多次。我还学习了有关使用Javascript构建地图的Google教程

这是我所看到的

    @model Phase5.Models.Supplier

@{
    ViewBag.Title = "Details";
}


<h2>Details</h2>

<div>
    <h4>Supplier</h4>
    <hr />
    <dl class="dl-horizontal">
        <dt>
            @Html.DisplayNameFor(model => model.SupplierName)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.SupplierName)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.Address)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Address)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.AddressLine2)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.AddressLine2)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.Postcode)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Postcode)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.Phone)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Phone)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.Email)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.Email)
        </dd>

        <dt>
            @Html.DisplayNameFor(model => model.ContactName)
        </dt>

        <dd>
            @Html.DisplayFor(model => model.ContactName)
        </dd>

    </dl>
</div>

<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCR40cXGAT-hM1MqQkJQZ7NLqZOlJMXg20&callback=initMap"
            async defer type="text/javascript"></script>




    <!-- This css is to ensure that the google map contols (zoom bar etc) show and size correctly. -->
    <style>
        #map_canvas img {
            max-width: none;
        }
    </style>

    <!-- This css is to give a nice big popup "info window" when a marker is clicked on the map -->
    <style>
        .infoDiv {
            height: 200px;
            width: 300px;
            -webkit-user-select: none;
            background-color: white;
        }
    </style>

    <!-- This is the div that will contain the Google Map -->
    <div id="map_canvas" style="height: 600px;"></div>

    <!-- Enclose the Javascript in a "section" so that it is rendered in the correct order after scripts have been loaded etc -->
    @section scripts {
        <section class="scripts">

            <script type="text/javascript">

        $(document).ready(function () {
            Initialize();
        });
     function codeAddress(address) {
            geocoder = new google.maps.Geocoder();
            geocoder.geocode({ 'address': address }, function (results, status) {
                if (status == google.maps.GeocoderStatus.OK) {
                    var myOptions = {
                        zoom: 17,
                        center: results[0].geometry.location,
                        mapTypeId: google.maps.MapTypeId.ROADMAP

                    }
                    map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
                    var marker = new google.maps.Marker({
                        map: map,
                        position: results[0].geometry.location

                    });
                    // create a marker
                    var marker = new google.maps.Marker({
                        position: results[0].geometry.location,
                        map: map ,
                        title: 'Latitude: ' + results[0].geometry.location.Ya + ' Longitude :' + results[0].geometry.location.Za
                    });
                }
            });

        }

        //Call this function with giving the address.
        codeAddress("@Model.Address + @Model.AddressLine2 + @Model.Postcode");

            </script>
        </section>
    }



    <br />

    <p>
    @Html.ActionLink("Edit", "Edit", new { id = Model.SupplierId }) |
    @Html.ActionLink("Back to List", "Index")
</p>

@model Phase5.Models.Supplier
@{
ViewBag.Title=“详细信息”；
}
细节
供应商

@DisplayNameFor（model=>model.SupplierName）
@DisplayFor（model=>model.SupplierName）
@DisplayNameFor（model=>model.Address）
@DisplayFor（model=>model.Address）
@DisplayNameFor（model=>model.AddressLine2）
@DisplayFor（model=>model.AddressLine2）
@Html.DisplayNameFor（model=>model.Postcode）
@DisplayFor（model=>model.Postcode）
@DisplayNameFor（model=>model.Phone）
@DisplayFor（model=>model.Phone）
@DisplayNameFor（model=>model.Email）
@DisplayFor（model=>model.Email）
@DisplayNameFor（model=>model.ContactName）
@DisplayFor（model=>model.ContactName）
#地图画布图像{
最大宽度：无；
}
.infoDiv{
高度：200px；
宽度：300px；
-webkit用户选择：无；
背景色：白色；
}
@节脚本{
$（文档）.ready（函数（）{
初始化（）；
});
函数代码地址（地址）{
geocoder=新的google.maps.geocoder（）；
geocoder.geocode（{'address'：address}，函数（结果，状态）{
if（status==google.maps.GeocoderStatus.OK）{
变量myOptions={
缩放：17，
中心：结果[0].geometry.location，
mapTypeId:google.maps.mapTypeId.ROADMAP
}
map=new google.maps.map（document.getElementById（“map_canvas”），myOptions）；
var marker=new google.maps.marker({
地图：地图，
位置：结果[0]。几何体。位置
});
//创建一个标记
var marker=new google.maps.marker({
位置：结果[0]。geometry.location，
地图：地图，
标题：“纬度：”+结果[0]。geometry.location.Ya+“经度：”+结果[0]。geometry.location.Za
});
}
});
}
//调用此函数并给出地址。
代码地址（“@Model.Address+@Model.AddressLine2+@Model.Postcode”）；
}



@ActionLink（“编辑”，“编辑”，新的{id=Model.SupplierId}）|
@ActionLink（“返回列表”、“索引”）

我是否需要启用web.config设置才能使其完全工作，或者我缺少了什么

---

非常感谢

感谢Hackerman，答案是从脚本中删除

异步延迟

如果从脚本中删除

异步延迟

会发生什么？你的人！！！现在就像是一种享受。我知道它xD…我很乐意帮助：）