title: How do I get Google Maps working in Visual Studio web form?
body: <p><strong>Note, for this question I removed my API key from the code below and replaced with API_KEY but in the code that I am testing I have the key in place</strong></p>
  
  <p>I generated an API key in the Google Developers Console (it seems you dont need it for what im trying to do but i got it anyway, tried with and without it but it made no difference). I visited the Google Maps JavaScript API v3 'getting started' page, followed the instructions and copied this code into Notepad++, saved as a .html file and it works fine when I open it in a browser:</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
      &lt;html&gt;
        &lt;head&gt;
          &lt;style type="text/css"&gt;
            html, body, #map-canvas { height: 100%; margin: 0; padding: 0;}
          &lt;/style&gt;
          &lt;script type="text/javascript"
            src="https://maps.googleapis.com/maps/api/js?key=API_KEY"&gt;
          &lt;/script&gt;
          &lt;script type="text/javascript"&gt;
            function initialize() {
              var mapOptions = {
                center: { lat: -34.397, lng: 150.644},
                zoom: 8
              };
              var map = new google.maps.Map(document.getElementById('map-canvas'),
                  mapOptions);
            }
            google.maps.event.addDomListener(window, 'load', initialize);
          &lt;/script&gt;
        &lt;/head&gt;
        &lt;body&gt;
      &lt;div id="map-canvas"&gt;&lt;/div&gt;
        &lt;/body&gt;
      &lt;/html&gt;
  </code></pre>
  
  <p>I want to get Google Maps working in a web application that I am making in Visual Studio (2013 Premium) with C#. I tried creating a new empty project, adding a web form and I added the code from above in the appropriate areas. However, when I test in Chrome or Firefox nothing appears in the browser and no errors appear in VS. This is how it looks in Visual Studio:</p>
  
  <pre><code>&lt;%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication18.WebForm1" %&gt;
  
  &lt;!DOCTYPE html&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head runat="server"&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;style type="text/css"&gt;
        html, body, #map-canvas { height: 100%; margin: 0; padding: 0;}
      &lt;/style&gt;
      &lt;script type="text/javascript"
        src="https://maps.googleapis.com/maps/api/js?key=API_KEY"&gt;
      &lt;/script&gt;
      &lt;script type="text/javascript"&gt;
        function initialize() {
          var mapOptions = {
            center: { lat: -34.397, lng: 150.644},
            zoom: 8
          };
          var map = new google.maps.Map(document.getElementById('map-canvas'),
              mapOptions);
        }
        google.maps.event.addDomListener(window, 'load', initialize);
      &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;form id="form1" runat="server"&gt;
      &lt;div id="map-canvas"&gt;
      &lt;/div&gt;
      &lt;/form&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Any ideas what I am doing wrong here?</p>
  
  <p><strong>EDIT</strong>
  Here is the code when I right click and select 'View Source' in the Chrome browser window:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;&lt;title&gt;
  
  &lt;/title&gt;
      &lt;style type="text/css"&gt;
        html, body, #map-canvas { height: 100%; margin: 0; padding: 0;}
      &lt;/style&gt;
      &lt;script type="text/javascript"
        src="https://maps.googleapis.com/maps/api/js?key=API_KEY"&gt;
      &lt;/script&gt;
      &lt;script type="text/javascript"&gt;
        function initialize() {
          var mapOptions = {
            center: { lat: -34.397, lng: 150.644},
            zoom: 8
          };
          var map = new google.maps.Map(document.getElementById('map-canvas'),
              mapOptions);
        }
        google.maps.event.addDomListener(window, 'load', initialize);
      &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;form method="post" action="WebForm1.aspx" id="form1"&gt;
  &lt;div class="aspNetHidden"&gt;
  &lt;input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="hi2L1ymHDf4m8B8t0C7bGUHkzJoVY/TtxD8fMRwrGdRBRFyxRBkyp57WUnHCMItu0mDNlYrYGkHtWKhgOW3lB5fBBg4iLd5t9cqMKP5h3yg=" /&gt;
  &lt;/div&gt;
  
      &lt;div id="map-canvas"&gt;
      &lt;/div&gt;
  
  &lt;div class="aspNetHidden"&gt;
  
      &lt;input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="C687F31A" /&gt;
  &lt;/div&gt;&lt;/form&gt;
  
  &lt;!-- Visual Studio Browser Link --&gt;
  &lt;script type="application/json" id="__browserLink_initializationData"&gt;
      {"appName":"Chrome","requestId":"dd8420e975b84211bfc48926bc521058"}
  &lt;/script&gt;
  &lt;script type="text/javascript" src="http://localhost:57972/92ec7b1e9f6b45d880f3def8ac954bae/browserLink" async="async"&gt;&lt;/script&gt;
  &lt;!-- End Browser Link --&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>