Карты 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

рисунок в левом нижнем углу и

Условия использования

в правом нижнем углу.

Кто-нибудь может подсказать, почему сама карта не отображается?

@ Андерс: Я думаю, что это рендеринг 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">

удалено 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; 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.