Javascript document.getElementById在ASP.NET表单中找不到元素_Javascript_Asp.net_Google Maps

Javascript document.getElementById在ASP.NET表单中找不到元素

javascript asp.net google-maps

Javascript document.getElementById在ASP.NET表单中找不到元素,javascript,asp.net,google-maps,Javascript,Asp.net,Google Maps,我正在制作一个ASP.NET webforms页面，该页面将显示一个包含一系列标记的谷歌地图（通过）如果我不将放在标记中，它将非常有效但是如果我在中移动，我只会得到一个空白页（没有错误）查看检查器中的空白页，似乎中有一些基本元素填充以显示地图（除了标记），但是页面根本不显示任何东西。这可能是由于文档.getElementById由于在上动态创建的ID而在DOM中漫游时出现问题造成的吗注意：提供的代码只是一个测试页。一旦我对它进行排序，它将使用ASP.NET母版页 CSS <st

我正在制作一个ASP.NET webforms页面，该页面将显示一个包含一系列标记的谷歌地图（通过）

如果我不将

放在

标记中，它将非常有效

但是如果我在

中移动

，我只会得到一个空白页（没有错误）

查看检查器中的空白页，似乎中有一些基本元素填充以显示地图（除了标记），但是页面根本不显示任何东西。这可能是由于

文档.getElementById

由于在

上动态创建的ID而在DOM中漫游时出现问题造成的吗

注意：提供的代码只是一个测试页。一旦我对它进行排序，它将使用ASP.NET母版页

CSS

<style type="text/css">
    html, body, #map-canvas {
    height: 100%;
    margin: 0px;
    padding: 0px;
}


html，正文，#地图画布{
身高：100%；
边际：0px；
填充：0px；
}

脚本

<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script type="text/javascript">
    function initialize() {  
        var latlngCenter = new google.maps.LatLng(30.000000, -100.000000);
        var mapOptions = { zoom: 3, center: latlngCenter }
        var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
        var latlngPlaceOne = new google.maps.LatLng(-30.000000, 150.000000);
        var markerPlaceOne = new google.maps.Marker({
            position: latlngPlaceOne,
            map: map,
            title: 'Place One'
        });
     } 
     google.maps.event.addDomListener(window, 'load', initialize);
</script>


函数初始化（）{
var latlngCenter=new google.maps.LatLng（30.000000，-100.000000）；
var mapOptions={zoom:3，center:latlngCenter}
var map=new google.maps.map（document.getElementById（'map-canvas'），mapOptions）；
var latlngPlaceOne=新的google.maps.LatLng（-30.000000，150.000000）；
var markerPlaceOne=新的google.maps.Marker({
位置：latlngPlaceOne，
地图：地图，
标题：“第一名”
});
} 
google.maps.event.addDomListener（窗口“加载”，初始化）；

HTML

<body>
    <form id="form1" runat="server">
        <div id="map-canvas"></div>
    </form>
</body>

我已经尝试了您的示例，但只做了一点小修改：可能只是您的表单“缩小”了，因此地图不可见。我添加了以下样式（基本上取自示例）：


html、正文、表单、#地图画布{
身高：100%；
保证金：0；
填充：0；
}

希望这有帮助。

您可以发布呈现的HTML而不是ASP源代码吗？您可以添加ClientIDMode=“Static”“所以表单的服务器端和客户端的ID是相同的。但在您的代码中，div不是服务器控件，所以这不会是一个问题。@Krishnannijeevan我不想使用clientMode=Static，因为表单将位于母版页上，并用于大约150个其他页面。@Schien呈现的HTML是否有任何特别有用的部分？我不想把所有的东西都扔在这里。Maps API在呈现的“map canvas”之前和之后将大量标记转储到目标div.5行中。还要查找具有重复ID的元素。对不起，我的页面上已经有了CSS，但没有在问题中发布。@davidhast那么我认为这与

文档无关。getElementById

-我刚刚将您的代码复制粘贴到新创建的页面（干净的ASP.NET WebForms项目）中，它工作起来很有魅力！DOH，很抱歉。完全错过了里面的“表格”。谢谢你的耐心。

<style>
  html, body, form, #map-canvas {
    height: 100%;
    margin: 0;
    padding: 0;
  }
</style>