ASP.NET Web 用户控件中的 Google Maps API 3答案

【问题标题】：Google Maps API 3 inside ASP.NET Web User ControlASP.NET Web 用户控件中的 Google Maps API 3
【发布时间】：2014-01-02 20:13:56
【问题描述】：

当我的页面加载时，没有显示地图。控制台也没有错误。

如果我将两个 JS 脚本标签（和内容）连同 2 个 div 容器放在一起，并将它们放在 Default.aspx 中的表单标签上方......它工作得很好。

我知道自定义控件正在加载，因为如果我输入一个简单的文本框，它就会显示出来。

我有我的 Default.aspx 页面

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="DnnTest._Default" %>
<%@ Register Src="~/DnnTestView.ascx" TagPrefix="uc1" TagName="DnnTestView" %>
<html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <uc1:DnnTestView runat="server" id="DnnTestView" />
            </div>
        </form>
    </body>
</html>

还有自定义用户控件“DnnTestView.ascx”

<%@ Control Language="vb" AutoEventWireup="false" CodeBehind="DnnTestView.ascx.vb" Inherits="DnnTest.DnnTestView" %>

<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key=[our key here]&sensor=true">
</script>

<script type="text/javascript">
 var lat = 41.4934579;
    var lng = -90.50442090000001;
    var zoom = 14;

    function init() {
        var mapOptions = {
            center: new google.maps.LatLng(lat, lng),
            zoom: 16
        };
        var map = new google.maps.Map(document.getElementById("map-canvas"),
            mapOptions);

        var marker = new google.maps.Marker({
            position: new google.maps.LatLng(lat, lng),
            title: "ARA"
        });

        marker.setMap(map);
    }

    google.maps.event.addDomListener(window, 'load', init);
</script>

<div id="map-contanier" style="width: 100%; height: 100%;">
    <div id="map-canvas"/>
</div>

【问题讨论】：

标签： javascript asp.net google-maps google-maps-api-3 custom-controls

【解决方案1】：

#map-container 与地图的大小无关。

#map-canvas 的高度为 0。因此，将 style="height:100%" 设置为该标签

【讨论】：

【解决方案2】：

由于某种原因，在#map-canvas 上使用百分比高度对我不起作用。我必须将其设置为像素。

height:100px;

【讨论】：