[英]Using Google Maps in ASP.Net Webforms - map not displaying
I am a beginner to .NET programming and I am trying to put a Google Map in my code. 我是.NET编程的初学者,我正在尝试在代码中放入Google Map。 This is a user control that I have inside a MultiView I am following this tutorial but I cannot get it to work.
这是我正在遵循本教程的MultiView中使用的用户控件,但无法正常使用。 Can someone figure out what I am doing wrong?
有人可以弄清楚我在做什么错吗? I have looked at similar SO questions but did not find a solution - I specify my div width and height, call the initialize function on page load, etc. I get no compilation errors - everything works just fine and the div is there, it just does not load the map.
我看过类似的问题,但没有找到解决方案-我指定了div的宽度和高度,在页面加载时调用了初始化函数,等等。我没有编译错误-一切正常,并且div就在那里,只是不加载地图。 I tried putting "runat=server" in the script tag but that gave me a compilation error.
我尝试在脚本标记中放入“ runat = server”,但这给了我一个编译错误。
Relevant code: 相关代码:
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="StoreView.ascx.cs" Inherits="Practice.StoreView" %>
<asp:HiddenField ID="hdStoreName" runat="server" />
<asp:HiddenField ID="hdStateCode" runat="server" />
<div>
<asp:Button runat="server" ID="btnBackToStatePage" Text="Back to state" OnClick="btnBackToStatePage_Click" /></div>
<div>
<asp:Label ID="lblStorePageHeader" runat="server" Font-Size="X-Large"></asp:Label></div>
<div>
<asp:Image runat="server" ID="imgStorefront" ImageUrl="" /></div>
<head>
<title></title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas" style="width: 300px; height: 300px; float: right;">
</div>
</body>
EDIT I just tried to just render the map by itself in an HTML page, shown below, and it did not show up there either. 编辑我只是试图将地图本身呈现在HTML页面中,如下所示,并且该页面也未显示。 The words "This is a page" do show up, but not the map.
确实会显示“这是页面”字样,但不会显示地图。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>
<body>
<span>This is a page.</span>
<div id="map_canvas" style="width: 300px; height: 300px; float: right;">
</div>
</body>
</html>
The network tab upon viewing the ASPX page that should contain my map: 在查看应包含我的地图的ASPX页面时的“网络”标签:
The network tab upon viewing the HTML page that should contain the map: 查看应包含地图的HTML页面时的“网络”标签:
The javascript function works because I tried it and it shows the map. javascript函数有效,因为我尝试了它并显示了地图。 Maybe you are missing something else?
也许您还缺少其他东西?
This is my exact page and ![It shows this up ] 1 这是我的确切页面, ![显示出来] 1
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="main.aspx.cs" Inherits="HelpAspx.main" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
function initialize() {
var latlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {
zoom: 8,
center: latlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
}
</script>
</head>
<body onload="initialize()">
<form runat="server">
<asp:HiddenField ID="hdStoreName" runat="server" />
<asp:HiddenField ID="hdStateCode" runat="server" />
<div>
</div>
<div>
<asp:Label ID="lblStorePageHeader" runat="server" Font-Size="X-Large"></asp:Label>
</div>
<div>
<asp:Image runat="server" ID="imgStorefront" ImageUrl="" />
</div>
<div id="map_canvas" style="width: 300px; height: 300px; float: right;">
</div>
</form>
</body>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.