如何在ASP.NET C＃中显示Google Maps

Question

我正在努力将Google Maps控件添加到ASP.NET C＃页面中。我从Google获得了API密钥，我只是在测试页面，但似乎没有显示地图。我的最终结果是要使用文本框进行纬度和经度的输入，然后单击"提交"按钮，地图将我带到指定的位置。在前端，我有：

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

我尚未完成按钮点击事件，因为我想先获取上述。

Answer 1

问题是，呈现地图时您的UpdatePanel没有高度。如果指定控制高度，则可以看到地图：

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

Google文档说您必须明确设置一个高度：

请注意，Divs通常从其包含元素中占据宽度，而空的DIV通常具有0个高度。因此，您必须始终明确设置DIV的高度。

Answer 2

在我的情况下，我试图在更新面板内的模态弹出对话框中显示地图。棘手！

这是解决方案：

• 在ASPX单中(在模态弹出面板内(，我添加了一个Div

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

• 也在ASPX表单中，但是在更新面板之后，我添加了以下脚本：

  <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
      });
  }        
  

• 在C＃代码后面我添加了以下功能：

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

对于任何人，都希望在更新面板中添加Google Maps作为弹出模块