Asp.net mvc 3 谷歌地图不显示

我已经设置了以下内容页来显示英国地图

    <%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<dynamic>" %>

<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
    Paget's Progress
</asp:Content>

    <asp:Content ID="Content3" ContentPlaceHolderID="HeadContent" runat="server">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
        <style type="text/css">   html { height: 100% }   body { height: 100%; margin: 0; padding: 0 }   #map_canvas { height: 100% } </style>
        <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"> </script>
        <script type="text/javascript">
            function init() {
                var latlng = new google.maps.LatLng(54.0, 3.0);
                var myOptions = { zoom: 6, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP };
                var map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
            }
            google.maps.event.addDomListener(window, 'load', init);    
        </script>
    </asp:Content>

<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">

         <h1>Paget's Progress</h1>

    <p>Some text</p>
    <div id="map_canvas" style="width: 724px; height: 900px">
    </div>
</asp:Content>

我所看到的只是一个灰色的矩形，它的大小与我所期望的地图一样，是一个

由谷歌提供动力

它左下角的图形和

使用条款

在右下角

有人能解释为什么地图本身没有显示吗

@安德斯：我想这就是你想要的呈现HTML

    <div id="map_canvas" style="width: 724px; height: 900px; position: relative; background-color: rgb(229, 227, 223);">
<div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%;">
<div style="position: absolute; left: 0px; top: 0px; z-index: 0; cursor: url("http://maps.gstatic.com/intl/en_ALL/mapfiles/openhand_8_8.cur"), default;">
<div style="position: absolute; left: 0px; top: 0px; display: none;">
<div style="position: absolute; left: 0px; top: 0px; z-index: 0;">
<img style="position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;" src="http://maps.gstatic.com/intl/en_ALL/mapfiles/transparent.png">
<img style="position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;" src="http://maps.gstatic.com/intl/en_ALL/mapfiles/transparent.png">

删除27条相同的行

img style="position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;" src="http://maps.gstatic.com/intl/en_ALL/mapfiles/transparent.png">
</div>
</div>
<div style="position: absolute; left: 0px; top: 0px; display: none;">
<div style="position: absolute; left: 0px; top: 0px; z-index: 0;">
<img style="position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;" src="http://maps.gstatic.com/intl/en_ALL/mapfiles/transparent.png">

<img style="position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;" src="http://maps.gstatic.com/intl/en_ALL/mapfiles/transparent.png">
</div>
</div>
<div style="position: absolute; left: 0px; top: 0px; z-index: 100;"></div>
<div style="position: absolute; left: 0px; top: 0px; z-index: 101;"></div>
<div style="position: absolute; left: 0px; top: 0px; z-index: 102;"></div>
<div style="position: absolute; left: 0px; top: 0px; z-index: 103;"></div>
<div style="position: absolute; left: 0px; top: 0px; z-index: 104; cursor: default;"></div>
<div style="position: absolute; left: 0px; top: 0px; z-index: 105;"></div>
<div style="position: absolute; left: 0px; top: 0px; z-index: 106;"></div>
<div style="position: absolute; left: 0px; top: 0px; z-index: 107; cursor: default;"></div>
</div>
</div>
<div class="gmnoprint" style="-moz-user-select: none; z-index: 0; position: absolute; left: 2px; bottom: 2px;">
<a title="Click to see this area on Google Maps" target="_blank" href="http://maps.google.com/maps?key=ABQIAAAAihNS95ryi9_-fv63nfqGXBQsyrdppXfHLgdVlrK6gMoHlhbcBxRKjxrbAMgt3y8Bqwv1UI99H0dgZw&sensor=false&mapclient=jsapi&oi=map_misc&ct=api_logo">
<img style="width: 62px; height: 30px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px; cursor: pointer;" src="http://maps.gstatic.com/intl/en_ALL/mapfiles/poweredby.png">
</a>
</div>
<div style="-moz-user-select: none; z-index: 0; position: absolute; right: 3px; bottom: 2px; color: black; font-family: Arial,sans-serif; font-size: 11px; white-space: nowrap; text-align: right;" dir="ltr">
<span></span>
<a class="gmnoprint terms-of-use-link" href="http://www.google.com/intl/en_ALL/help/terms_maps.html" target="_blank">Terms of Use</a>
</div>
</div>
</div>

删除27条相同的行

img style="position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;" src="http://maps.gstatic.com/intl/en_ALL/mapfiles/transparent.png">
</div>
</div>
<div style="position: absolute; left: 0px; top: 0px; display: none;">
<div style="position: absolute; left: 0px; top: 0px; z-index: 0;">
<img style="position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;" src="http://maps.gstatic.com/intl/en_ALL/mapfiles/transparent.png">

<img style="position: absolute; left: 0px; top: 0px; width: 256px; height: 256px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px;" src="http://maps.gstatic.com/intl/en_ALL/mapfiles/transparent.png">
</div>
</div>
<div style="position: absolute; left: 0px; top: 0px; z-index: 100;"></div>
<div style="position: absolute; left: 0px; top: 0px; z-index: 101;"></div>
<div style="position: absolute; left: 0px; top: 0px; z-index: 102;"></div>
<div style="position: absolute; left: 0px; top: 0px; z-index: 103;"></div>
<div style="position: absolute; left: 0px; top: 0px; z-index: 104; cursor: default;"></div>
<div style="position: absolute; left: 0px; top: 0px; z-index: 105;"></div>
<div style="position: absolute; left: 0px; top: 0px; z-index: 106;"></div>
<div style="position: absolute; left: 0px; top: 0px; z-index: 107; cursor: default;"></div>
</div>
</div>
<div class="gmnoprint" style="-moz-user-select: none; z-index: 0; position: absolute; left: 2px; bottom: 2px;">
<a title="Click to see this area on Google Maps" target="_blank" href="http://maps.google.com/maps?key=ABQIAAAAihNS95ryi9_-fv63nfqGXBQsyrdppXfHLgdVlrK6gMoHlhbcBxRKjxrbAMgt3y8Bqwv1UI99H0dgZw&sensor=false&mapclient=jsapi&oi=map_misc&ct=api_logo">
<img style="width: 62px; height: 30px; -moz-user-select: none; border: 0px none; padding: 0px; margin: 0px; cursor: pointer;" src="http://maps.gstatic.com/intl/en_ALL/mapfiles/poweredby.png">
</a>
</div>
<div style="-moz-user-select: none; z-index: 0; position: absolute; right: 3px; bottom: 2px; color: black; font-family: Arial,sans-serif; font-size: 11px; white-space: nowrap; text-align: right;" dir="ltr">
<span></span>
<a class="gmnoprint terms-of-use-link" href="http://www.google.com/intl/en_ALL/help/terms_maps.html" target="_blank">Terms of Use</a>
</div>
</div>
</div>

修好了。我知道那是我的错！！我有我的

---

在错误的地方。在链接到jquery-1.4.4.min.js库之前

我将您的html+javascript复制到一个静态html文件中，它在Firefox中似乎运行良好。你能发布你得到的呈现html吗？@Anders：由于篇幅太长，我把html附在了我原始问题的底部。看来问题可能是src=http://maps.gstatic.com/intl/en_ALL/mapfiles/transparent.png 语句。@Anders，正如您所说，它完美地显示为一个单页网站。使用内容页时可能会遇到什么阻碍？可能是服务器对页面的某些部分进行了评估，而它们实际上应该在客户端运行吗？@Anders我不知道，但我不这么认为。当我查看为单个页面生成的HTML时，使用iFrame显示了分幅。我在使用内容页时看不到这些。