Google Maps API in ASP.NET Masterpage: why it stays blank?
This simple example works in pure html when launching within visual studio localhost:port server
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=true">
</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:100%; height:100%"></div>
</body>
</html>
I tried to adapt to asp.net under visual studio 2010 default template and though it runs it doesn't show any map why ?
Masterpage:
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="SiteMaster" %>
<!DOCTYPE html>
<html>
<head runat="server">
<title></title>
<link href="~/Styles/Site.css" rel="stylesheet" type="text/css" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=true">
</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>
<asp:ContentPlaceHolder ID="HeadContent" runat="server">
</asp:ContentPlaceHolder>
</head>
<body onload="initialize()">
<form runat="server">
<div class="page">
<div class="header">
<div class="title">
<h1>
Google Maps in ASP.NET
</h1>
</div>
<div class="loginDisplay">
<asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
<AnonymousTemplate>
[ <a href="~/Account/Login.aspx" ID="HeadLoginStatus" runat="server">Log In</a> ]
</AnonymousTemplate>
<LoggedInTemplate>
Welcome <span class="bold"><asp:LoginName ID="HeadLoginName" runat="server" /></span>!
[ <asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/"/> ]
</LoggedInTemplate>
</asp:LoginView>
</div>
<div class="clear hideSkiplink">
<asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
<Items>
<asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
<asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
</Items>
</asp:Menu>
</div>
</div>
<div class="main">
<asp:ContentPlaceHolder ID="MainContent" runat="server"/>
</div>
<div class="clear">
</div>
</div>
<div class="footer">
</div>
</form>
</body>
</html>
Default.aspx:
<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
CodeFile="Default.aspx.cs" Inherits="_Default" %>
<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<div id="map_canvas" style="width:100%; hei开发者_如何学编程ght:100%"></div>
</asp:Content>
Update: this is the rendered html
<!DOCTYPE html>
<html>
<head><title>
Home Page
</title><link href="Styles/Site.css" rel="stylesheet" type="text/css" />
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0px; padding: 0px }
#map_canvas { height: 100% }
</style>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript"
src="http://maps.google.com/maps/api/js?sensor=true">
</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 method="post" action="default.aspx" id="ctl01">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1MmRkgEGBoemMtm+/v6V+m9lmIvRj4NCUaPh/xvbFFRPTsmc=" />
</div>
<script src="/googlemapstutorial/WebResource.axd?d=pX2KOH15DXBIWd9F3pw0pYRvxH0rCs_7BzgxTRUKsZkV8iILrBf16Um3jfikb78HXD5CWcorG2sj456pwVRsUev4lKFhNxwLEsZ0G3MsXkw1&t=634222671270572046" type="text/javascript"></script>
<div class="page">
<div class="header">
<div class="title">
<h1>
Google Maps in ASP.NET
</h1>
</div>
<div class="loginDisplay">
[ <a href="Account/Login.aspx" id="HeadLoginView_HeadLoginStatus">Log In</a> ]
</div>
<div class="clear hideSkiplink">
<a href="#NavigationMenu_SkipLink"><img alt="Skip Navigation Links" src="/googlemapstutorial/WebResource.axd?d=TJBKVc8nekHCgPywjGbDmMgRlrAm9FIu3FELc6xCCTlRxYfnY8nfoPOyAs8B8fawdRaonWVsHF9mLU3lY2PCkgjBIN2S1Hne4nX1WfWtaN01&t=634222671270572046" width="0" height="0" style="border-width:0px;" /></a><div class="menu" id="NavigationMenu">
<ul class="level1">
<li><a class="level1" href="Default.aspx">Home</a></li><li><a class="level1" href="About.aspx">About</a></li>
</ul>
</div><a id="NavigationMenu_SkipLink"></a>
</div>
</div>
<div class="main">
<div id="map_canvas" style="width:100%; height:100%"></div>
</div>
<div class="clear">
</div>
</div>
<div class="footer">
</div>
<script type='text/javascript'>new Sys.WebForms.Menu({ element: 'NavigationMenu', disappearAfter: 500, orientation: 'horizontal', tabIndex: 0, disabled: false });</script></form>
</body>
</html>
Google is all Javascript, so the fact it's in a Master page shouldn't matter unless you have local path issues, which I don't see.
I would use Firefox's Error Console to see if there are any Javascript errors when the page loads.
EDIT
I thought it was some weird tag nesting issue, but it's actually the fact that you're using percentages for your dimensions. '100%' means use fill the enclosing containers space, but if the container is empty we don't get a size. If you set your map div to a fixed size, you will see your map.
加载中,请稍侯......
精彩评论