Googleマップが表示されない

Question

私は以下のコンテンツページを設定して、英国の地図を表示しています。

<%@ 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> 

すべて私が表示されますが、それと

の左下隅にGoogleが

グラフィックを搭載

灰色の四角形私は期待していマップのサイズです

利用規約

右下にあります。

地図自体が表示されていない理由をお聞かせください。

@Anders：同じ行が

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"> 

27を削除

<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私は、これはあなたが望むレンダリングされたHTMLだと思いますが、同一の行は、それを修正

<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> 

Answer 1

を削除しました。私はが知りましたそれは私のせいでしょう！私は自分が持っていた

<asp:ContentPlaceHolder ID="HeadContent" runat="server" /> 

間違った場所にあります。これはjquery-1.4.4.min.jsライブラリへのリンクの前です。