title: Google Maps API in ASP.NET Masterpage: why it stays blank?
body: <p>This simple example works in pure html when launching within visual studio localhost:port  server</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&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: 0px; padding: 0px }
    #map_canvas { height: 100% }
  &lt;/style&gt;
  &lt;script type="text/javascript"
      src="http://maps.google.com/maps/api/js?sensor=true"&gt;
  &lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      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);
      }
  
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body onload="initialize()"&gt;
    &lt;div id="map_canvas" style="width:100%; height:100%"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I tried to adapt to asp.net under visual studio 2010 default template and though it runs it doesn't show any map why ?</p>
  
  <p>Masterpage:</p>
  
  <pre><code>&lt;%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="SiteMaster" %&gt;
  
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head runat="server"&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;link href="~/Styles/Site.css" rel="stylesheet" type="text/css" /&gt;
      &lt;style type="text/css"&gt;
        html { height: 100% }
        body { height: 100%; margin: 0px; padding: 0px }
        #map_canvas { height: 100% }
      &lt;/style&gt;
      &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no" /&gt;
      &lt;script type="text/javascript"
          src="http://maps.google.com/maps/api/js?sensor=true"&gt;
      &lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          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);
          }
  
      &lt;/script&gt;
      &lt;asp:ContentPlaceHolder ID="HeadContent" runat="server"&gt;
  
      &lt;/asp:ContentPlaceHolder&gt;
  &lt;/head&gt;
  &lt;body onload="initialize()"&gt;
      &lt;form runat="server"&gt;
      &lt;div class="page"&gt;
          &lt;div class="header"&gt;
              &lt;div class="title"&gt;
                  &lt;h1&gt;
                      Google Maps in ASP.NET
                  &lt;/h1&gt;
              &lt;/div&gt;
              &lt;div class="loginDisplay"&gt;
                  &lt;asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false"&gt;
                      &lt;AnonymousTemplate&gt;
                          [ &lt;a href="~/Account/Login.aspx" ID="HeadLoginStatus" runat="server"&gt;Log In&lt;/a&gt; ]
                      &lt;/AnonymousTemplate&gt;
                      &lt;LoggedInTemplate&gt;
                          Welcome &lt;span class="bold"&gt;&lt;asp:LoginName ID="HeadLoginName" runat="server" /&gt;&lt;/span&gt;!
                          [ &lt;asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/"/&gt; ]
                      &lt;/LoggedInTemplate&gt;
                  &lt;/asp:LoginView&gt;
              &lt;/div&gt;
              &lt;div class="clear hideSkiplink"&gt;
                  &lt;asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal"&gt;
                      &lt;Items&gt;
                          &lt;asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/&gt;
                          &lt;asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/&gt;
                      &lt;/Items&gt;
                  &lt;/asp:Menu&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="main"&gt;
              &lt;asp:ContentPlaceHolder ID="MainContent" runat="server"/&gt;
          &lt;/div&gt;
          &lt;div class="clear"&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="footer"&gt;
  
      &lt;/div&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Default.aspx:</p>
  
  <pre><code>&lt;%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
      CodeFile="Default.aspx.cs" Inherits="_Default" %&gt;
  
  &lt;asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent"&gt;
  
  &lt;/asp:Content&gt;
  &lt;asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent"&gt;
  
    &lt;div id="map_canvas" style="width:100%; height:100%"&gt;&lt;/div&gt;
  
  &lt;/asp:Content&gt;
  </code></pre>
  
  <p>Update: this is the rendered html</p>
  
  <pre><code>&lt;!DOCTYPE html&gt; 
  &lt;html&gt; 
  &lt;head&gt;&lt;title&gt; 
      Home Page
  &lt;/title&gt;&lt;link href="Styles/Site.css" rel="stylesheet" type="text/css" /&gt; 
      &lt;style type="text/css"&gt; 
        html { height: 100% }
        body { height: 100%; margin: 0px; padding: 0px }
        #map_canvas { height: 100% }
      &lt;/style&gt; 
      &lt;meta name="viewport" content="initial-scale=1.0, user-scalable=no" /&gt; 
      &lt;script type="text/javascript"
  
          src="http://maps.google.com/maps/api/js?sensor=true"&gt; 
      &lt;/script&gt; 
      &lt;script type="text/javascript"&gt; 
          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);
          }
  
      &lt;/script&gt; 
  
  
  &lt;/head&gt; 
  &lt;body onload="initialize()"&gt; 
      &lt;form method="post" action="default.aspx" id="ctl01"&gt; 
  &lt;div class="aspNetHidden"&gt; 
  &lt;input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1MmRkgEGBoemMtm+/v6V+m9lmIvRj4NCUaPh/xvbFFRPTsmc=" /&gt; 
  &lt;/div&gt; 
  
  
  &lt;script src="/googlemapstutorial/WebResource.axd?d=pX2KOH15DXBIWd9F3pw0pYRvxH0rCs_7BzgxTRUKsZkV8iILrBf16Um3jfikb78HXD5CWcorG2sj456pwVRsUev4lKFhNxwLEsZ0G3MsXkw1&amp;amp;t=634222671270572046" type="text/javascript"&gt;&lt;/script&gt; 
      &lt;div class="page"&gt; 
          &lt;div class="header"&gt; 
              &lt;div class="title"&gt; 
                  &lt;h1&gt; 
                      Google Maps in ASP.NET
                  &lt;/h1&gt; 
              &lt;/div&gt; 
              &lt;div class="loginDisplay"&gt; 
  
                          [ &lt;a href="Account/Login.aspx" id="HeadLoginView_HeadLoginStatus"&gt;Log In&lt;/a&gt; ]
  
              &lt;/div&gt; 
              &lt;div class="clear hideSkiplink"&gt; 
                  &lt;a href="#NavigationMenu_SkipLink"&gt;&lt;img alt="Skip Navigation Links" src="/googlemapstutorial/WebResource.axd?d=TJBKVc8nekHCgPywjGbDmMgRlrAm9FIu3FELc6xCCTlRxYfnY8nfoPOyAs8B8fawdRaonWVsHF9mLU3lY2PCkgjBIN2S1Hne4nX1WfWtaN01&amp;amp;t=634222671270572046" width="0" height="0" style="border-width:0px;" /&gt;&lt;/a&gt;&lt;div class="menu" id="NavigationMenu"&gt; 
      &lt;ul class="level1"&gt; 
          &lt;li&gt;&lt;a class="level1" href="Default.aspx"&gt;Home&lt;/a&gt;&lt;/li&gt;&lt;li&gt;&lt;a class="level1" href="About.aspx"&gt;About&lt;/a&gt;&lt;/li&gt; 
      &lt;/ul&gt; 
  &lt;/div&gt;&lt;a id="NavigationMenu_SkipLink"&gt;&lt;/a&gt; 
              &lt;/div&gt; 
          &lt;/div&gt; 
          &lt;div class="main"&gt; 
  
  
    &lt;div id="map_canvas" style="width:100%; height:100%"&gt;&lt;/div&gt; 
  
  
          &lt;/div&gt; 
          &lt;div class="clear"&gt; 
          &lt;/div&gt; 
      &lt;/div&gt; 
      &lt;div class="footer"&gt; 
  
      &lt;/div&gt; 
  
  &lt;script type='text/javascript'&gt;new Sys.WebForms.Menu({ element: 'NavigationMenu', disappearAfter: 500, orientation: 'horizontal', tabIndex: 0, disabled: false });&lt;/script&gt;&lt;/form&gt; 
  &lt;/body&gt; 
  &lt;/html&gt; 
  </code></pre>