CODEWITHSUNDEEP
javascriptc#google-mapsvisual-studio-2013
Stackman
Stackman

Reputation: 129

How do I get Google Maps working in Visual Studio web form?

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

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:

    <!DOCTYPE html>
    <html>
      <head>
        <style type="text/css">
          html, body, #map-canvas { height: 100%; margin: 0; padding: 0;}
        </style>
        <script type="text/javascript"
          src="https://maps.googleapis.com/maps/api/js?key=API_KEY">
        </script>
        <script type="text/javascript">
          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);
        </script>
      </head>
      <body>
    <div id="map-canvas"></div>
      </body>
    </html>

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:

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication18.WebForm1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
      html, body, #map-canvas { height: 100%; margin: 0; padding: 0;}
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=API_KEY">
    </script>
    <script type="text/javascript">
      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);
    </script>
</head>

<body>
    <form id="form1" runat="server">
    <div id="map-canvas">
    </div>
    </form>
</body>
</html>

Any ideas what I am doing wrong here?

EDIT Here is the code when I right click and select 'View Source' in the Chrome browser window:

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>

</title>
    <style type="text/css">
      html, body, #map-canvas { height: 100%; margin: 0; padding: 0;}
    </style>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=API_KEY">
    </script>
    <script type="text/javascript">
      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);
    </script>
</head>

<body>
    <form method="post" action="WebForm1.aspx" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="hi2L1ymHDf4m8B8t0C7bGUHkzJoVY/TtxD8fMRwrGdRBRFyxRBkyp57WUnHCMItu0mDNlYrYGkHtWKhgOW3lB5fBBg4iLd5t9cqMKP5h3yg=" />
</div>

    <div id="map-canvas">
    </div>

<div class="aspNetHidden">

    <input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="C687F31A" />
</div></form>

<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Chrome","requestId":"dd8420e975b84211bfc48926bc521058"}
</script>
<script type="text/javascript" src="http://localhost:57972/92ec7b1e9f6b45d880f3def8ac954bae/browserLink" async="async"></script>
<!-- End Browser Link -->

</body>
</html>

Upvotes: 3

Views: 5418

Answers (1)

James Gaunt
James Gaunt

Reputation: 14793

In the .aspx version your webforms form element is a block element but because there is nothing inside it other than the map-canvas which has a percentage height the form has 0 height (i.e. 100% of 0 is still 0).

Add form { height: 100%; } to the CSS and the map should be visible.

You could achieve a similar effect by setting a fixed rather than percentage height on the map-canvas.

By the way - your key was visible in the 3rd code block - I edited it out but it will still be there in the history so if you're concerned I'd generate a new key.

Upvotes: 3

Related Questions