ASP.net谷歌地图

我想添加一个谷歌地图到一个ASP .Net子页面（它有一个母版页）的div。地图信息似乎从谷歌加载 - 但我什么都看不到。当我在Chrome中打开F12时，我可以看到我的div已经充满了很多其他的div和关于地图的数据。ASP.net谷歌地图

任何想法为什么我的地图是不可见的？

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Contact.aspx.cs" Inherits="CentralWebsite.Contact" %> 
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server"> 
    <style type="text/css"> 
     .style1 
     { 
      width: 317px; 
     } 
    </style> 
    <script type="text/javascript" 
     src="http://maps.googleapis.com/maps/api/js?key=mykey=false"> 
    </script> 
    <script type="text/javascript"> 
     function initialize() { 
      var myOptions = { 
       center: new google.maps.LatLng(-34.397, 150.644), 
       zoom: 8, 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 
      var map = new google.maps.Map(document.getElementById("map_canvas"), 
      myOptions); 
      alert("alert " + document.getElementById("map_canvas")); 
     } 
    </script> 
</asp:Content> 
<asp:Content ID="BodyContent" ContentPlaceHolderID="MainContent" runat="server"> 
    <table style="width: 100%;"> 
     <tr> 
      <td class="style1"> 
       <h1>Telephone: 01709</h1> 
       <h1>Address</h1> 
       <h3></h3> 
       <h3>Rotherham</h3> 
       <h3>South Yorkshire</h3> 
       <h3>S60 1PP</h3> 
      </td> 
      <td> 
       <div id="map_canvas" style="width:100%; height:100%"> 
        map should go here 
       </div> 
      </td> 
     </tr> 
    </table> 

</asp:Content>

我通过如下将其作为母版页身体的onload属性调用初始化函数：

public partial class Contact : System.Web.UI.Page 
    { 
     protected void Page_Load(object sender, EventArgs e) 
     { 
      HtmlGenericControl myBody = (HtmlGenericControl)Master.FindControl("myBody"); 
      myBody.Attributes.Add("onload", "initialize()"); 
     } 
    }

非常感谢

罗布。

来源

2012-01-15 Rob Bowman

您必须在起始页面调用JavaScript方法initialize（）。然后将工作！ – 2012-01-15 10:38:29

对不起，我没有解释 - 我正在从子页面的page_load调用初始化函数。我知道正在调用initialize，因为Alert对话框显示 – 2012-01-15 14:49:43

因为你不叫任何地方的initialize()！

调用它的页面加载，或在DOM准备，或者只是把它的地图格后

<div id="map_canvas" style="width:100%; height:100%">map should go here</div> 
<script>initialize();</script>

或者甚至更好的表包含DIV地图收盘

</table> 
    <script>initialize();</script>

来源

2012-01-15 11:08:41 Aristos

首先它看起来像你使用的版本2的api有你的钥匙..你不需要这个版本3.第二，我使用JQuery调用初始化，而不是在代码隐藏中添加属性，只是似乎越野车我努力争取，并让它在一段时间后恢复正常。

尝试这样的（我有jQuery的指定局部参考，必要时进行调整）

<script src="js/jquery-1.7.1.min.js" type="text/javascript"></script> 
<script src="http://maps.google.com/maps/api/js?sensor=false"></script> 
<script> 
    $(function() { 
     initialize(); 
    }); 


    function initialize() { 
     var myOptions = { 
      center: new google.maps.LatLng(-34.397, 150.644), 
      zoom: 8, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("map_canvas"), 
     myOptions); 
     alert("alert " + document.getElementById("map_canvas")); 
    } 
</script>

而且，在CSS中明确设置高度/宽度为map_canvas提供：

#map_canvas 
{ 
    width: 300px; 
    height: 265px; 
    border:1px solid #C3C8BD; 
    border-radius:5px; 
    -o-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    -moz-border-radius: 5px; 
}

来源

2012-01-15 15:15:02 justinlabenne

在网站形式，为了得到一个可见地图，我一直都致电initialize()和明确地将map_canvas div的宽度和高度设置为像素数量。通过使用F12开发人员工具或Firebug检查div，可以验证百分比导致地图div高度等于0 px。

此代码显示了在浏览器调整大小时调整大小的地图div。请注意，JavaScript将放入由"~/bundles/gmaps"引用的文件中。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="testme.aspx.cs" Inherits="drawingTools.testme" %> 

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head runat="server"> 
    <title></title> 
    <script type="text/javascript" 
     src="http://maps.google.com/maps/api/js?sensor=false&libraries=drawing"></script> 
    <asp:PlaceHolder ID="PlaceHolder1" runat="server"> 
     <%: System.Web.Optimization.Scripts.Render("~/bundles/gmaps") %> 
     <script type="text/javascript"> 
      google.maps.event.addDomListener(window, 'load', myPageLoad); 
     </script> 
    </asp:PlaceHolder> 
</head> 
<body> 
    <form runat="server">   
     <div id="map_canvas" class="map_canvas" > 
     </div> 
    </form> 
</body> 
</html>

在ASPX代码google.maps.event.addDomListener(window, 'load', pageLoad); 用于当窗口加载到调用myPageLoad功能。或者使用jQuery$(document).ready函数等待文档准备好Google Maps初始化。

function myPageLoad() { 
    resize(); 
    initialize(); // your google.map initializer 
}

resize()功能用于可调整大小的地图。你可以根据需要调整它。目的是将map_canvas div的尺寸设置为100％。

function resize() { 
    var main = document.getElementById("map_canvas"); 
    main.style.height = (getWindowHeight()) + "px"; 
    main.style.width = (getWindowWidth()) + "px"; 
} 
onresize = function() { resize(); };

的JavaScript函数，getWindowHeight()和getWindowWidth()可以从许多来源获得，或者你可以写你自己的。

作为一个社论，除了在aspx页面上使用谷歌地图带来了挑战。例如。除非回发被禁用，否则从按钮控制回发将调用myPageLoad函数，如果不希望出现错误结果。

来源

2013-12-26 07:54:28 subsci

在母版页中，您应在标签中设置ID“myBody”和runat“server”。

来源

2016-09-30 12:12:03 user6904619

ASP.net谷歌地图

回答

相关问题