title: Google Maps not displaying
body: <p>I have the following content page set up to display a map of the UK.</p>
  
  <pre><code>    &lt;%@ Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage&lt;dynamic&gt;" %&gt;
  
  &lt;asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server"&gt;
      Paget's Progress
  &lt;/asp:Content&gt;
  
      &lt;asp:Content ID="Content3" ContentPlaceHolderID="HeadContent" runat="server"&gt;
          &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no" /&gt;
          &lt;style type="text/css"&gt;   html { height: 100% }   body { height: 100%; margin: 0; padding: 0 }   #map_canvas { height: 100% } &lt;/style&gt;
          &lt;script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"&gt; &lt;/script&gt;
          &lt;script type="text/javascript"&gt;
              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);    
          &lt;/script&gt;
      &lt;/asp:Content&gt;
  
  &lt;asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server"&gt;
  
           &lt;h1&gt;Paget's Progress&lt;/h1&gt;
  
      &lt;p&gt;Some text&lt;/p&gt;
      &lt;div id="map_canvas" style="width: 724px; height: 900px"&gt;
      &lt;/div&gt;
  &lt;/asp:Content&gt;
  </code></pre>
  
  <p>All I get displayed is a grey rectangle the size of the map I am expecting, a </p>
  
  <blockquote>
    <p>Powered by Google</p>
  </blockquote>
  
  <p>graphic in the bottom left corner of it and </p>
  
  <blockquote>
    <p>Terms of Use</p>
  </blockquote>
  
  <p>in the bottom right corner.</p>
  
  <p>Can anybody suggest why the map itself is not being displayed?</p>
  
  <p>@Anders: I think this is the rendered HTML you want</p>
  
  <pre><code>    &lt;div id="map_canvas" style="width: 724px; height: 900px; position: relative; background-color: rgb(229, 227, 223);"&gt;
  &lt;div style="position: absolute; left: 0px; top: 0px; overflow: hidden; width: 100%; height: 100%;"&gt;
  &lt;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;"&gt;
  &lt;div style="position: absolute; left: 0px; top: 0px; display: none;"&gt;
  &lt;div style="position: absolute; left: 0px; top: 0px; z-index: 0;"&gt;
  &lt;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"&gt;
  &lt;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"&gt;
  </code></pre>
  
  <p>27 identical lines deleted</p>
  
  <pre><code>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"&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div style="position: absolute; left: 0px; top: 0px; display: none;"&gt;
  &lt;div style="position: absolute; left: 0px; top: 0px; z-index: 0;"&gt;
  &lt;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"&gt;
  </code></pre>
  
  <p>27 identical lines deleted</p>
  
  <pre><code>&lt;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"&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div style="position: absolute; left: 0px; top: 0px; z-index: 100;"&gt;&lt;/div&gt;
  &lt;div style="position: absolute; left: 0px; top: 0px; z-index: 101;"&gt;&lt;/div&gt;
  &lt;div style="position: absolute; left: 0px; top: 0px; z-index: 102;"&gt;&lt;/div&gt;
  &lt;div style="position: absolute; left: 0px; top: 0px; z-index: 103;"&gt;&lt;/div&gt;
  &lt;div style="position: absolute; left: 0px; top: 0px; z-index: 104; cursor: default;"&gt;&lt;/div&gt;
  &lt;div style="position: absolute; left: 0px; top: 0px; z-index: 105;"&gt;&lt;/div&gt;
  &lt;div style="position: absolute; left: 0px; top: 0px; z-index: 106;"&gt;&lt;/div&gt;
  &lt;div style="position: absolute; left: 0px; top: 0px; z-index: 107; cursor: default;"&gt;&lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="gmnoprint" style="-moz-user-select: none; z-index: 0; position: absolute; left: 2px; bottom: 2px;"&gt;
  &lt;a title="Click to see this area on Google Maps" target="_blank" href="http://maps.google.com/maps?key=ABQIAAAAihNS95ryi9_-fv63nfqGXBQsyrdppXfHLgdVlrK6gMoHlhbcBxRKjxrbAMgt3y8Bqwv1UI99H0dgZw&amp;sensor=false&amp;mapclient=jsapi&amp;oi=map_misc&amp;ct=api_logo"&gt;
  &lt;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"&gt;
  &lt;/a&gt;
  &lt;/div&gt;
  &lt;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"&gt;
  &lt;span&gt;&lt;/span&gt;
  &lt;a class="gmnoprint terms-of-use-link" href="http://www.google.com/intl/en_ALL/help/terms_maps.html" target="_blank"&gt;Terms of Use&lt;/a&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>