Javascript 如何在ASP.NET C中显示google地图#

我正在将google maps控件添加到ASP.NET C#页面中。我已经从谷歌获得了API密钥，我刚刚测试了页面，但似乎地图没有显示出来。我的最终结果是使用纬度和经度的文本框进行输入，单击submit按钮，地图会将我带到指定的位置。在前端，我有：

<script>
    var map;
    function initialize() {
        map = new google.maps.Map(document.getElementById('map'), {
            center: new google.maps.LatLng(48.1293954, 11.556663), // Munich Germany
            zoom: 10
        });
    }

    function newLocation(newLat, newLng) {
        map.setCenter({
            lat: newLat,
            lng: newLng
        });
    }

    google.maps.event.addDomListener(window, 'load', initialize);
</script>
<form id="form1" runat="server">
    <asp:ScriptManager ID="sManager" runat="server" />
    <asp:UpdatePanel ID="pnlTest" runat="server">
        <ContentTemplate>
            <div style="height: 60%;" id="map"></div>

            <asp:TextBox ID="txtLat" runat="server" />
            <asp:TextBox ID="txtLong" runat="server" />
            <asp:Button ID="btnSubmit" Text="Submit" runat="server" />
        </ContentTemplate>
    </asp:UpdatePanel>
</form>

var映射；
函数初始化（）{
map=new google.maps.map（document.getElementById（'map'）{
中心：新google.maps.LatLng（48.1293954，11.556663），//德国慕尼黑
缩放：10
});
}
功能新建位置（新建LAT、新建LNG）{
地图设置中心({
拉特：纽拉特，
液化天然气：新液化天然气
});
}
google.maps.event.addDomListener（窗口“加载”，初始化）；

---

我没有执行按钮单击事件，因为我想先查看上面的内容。

问题在于渲染地图时，您的

更新面板没有高度。如果为控件指定高度，则贴图将可见：

<asp:UpdatePanel ID="pnlTest" runat="server" style="height:400px;">

表示必须明确设置高度：

请注意，div通常从其包含元素中获取宽度，而空div的高度通常为0。因此，必须始终明确地在div上设置高度

在我的例子中，我试图在更新面板中的模式弹出对话框中显示地图。狡猾

这就是解决方案：


在aspx表单（在模态弹出面板内）中，我添加了一个如下的div

<div id="map" style="width: 600px; height: 400px; margin-right: auto; margin-left: auto;"></div>



如果有人想在更新面板中添加Google Maps作为弹出式模块
您可以更新示例以显示您正在加载的Google API库吗？我只使用这个。maps.googleapis.com/maps/api/js？key=MY_key“>这可能就是问题所在。您是否有“google未定义”的JavaScript错误？实际上没有。如果我“在表单标记中，但在updatepanel之外，地图显示。但是，考虑到我未来的计划是在单击事件时使用submit按钮将地图移动到指定位置，我认为在updatepanel中使用此按钮更为理想？我尝试向上投票，如果这是您要求的，但它说我不能。如何操作？在向上/向下投票计数器下有一个灰色复选标记。这标志着一个回应就是答案。
<script src="https://maps.googleapis.com/maps/api/js?key=(YOUR_API_KEY_Here)&sensor=false"></script>

<script type="text/javascript">
var map;
function RenderTheMap(lat, long) {
    map = new google.maps.Map(document.getElementById('map'), {
        center: new google.maps.LatLng(lat, long), 
        zoom: 9
    });

    var latlng = new google.maps.LatLng(lat, long);
    new google.maps.Marker({
        position: latlng,
        map: map
    });
}        

private void ShowMap(string Address_Lat, string Address_Long)
{
    ScriptManager.RegisterStartupScript(
    UpdatePanel1,
    this.GetType(),
    "RenderMap",
    "RenderTheMap(" + Address_Lat + ", " + Address_Long + ");",
    true);
    MapPanel_ModalPopupExtender.Show();
}