Google Maps API in ASP.NET Masterpage: why it stays blank?

This simple example works in pure html when launching within visual studio localhost:port server

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<style type="text/css">
  html { height: 100% }
  body { height: 100%; margin: 0px; padding: 0px }
  #map_canvas { height: 100% }
</style>
<script type="text/javascript"
    src="https://maps.google.com/maps/api/js?sensor=true">
</script>
<script type="text/javascript">
    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);
    }

</script>
</head>
<body onload="initialize()">
  <div id="map_canvas" style="width:100%; height:100%"></div>
</body>
</html>

I tried to adapt to asp.net under visual studio 2010 default template and though it runs it doesn’t show any map why ?

Masterpage:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="Site.master.cs" Inherits="SiteMaster" %>

<!DOCTYPE html>
<html>
<head runat="server">
    <title></title>
    <link href="~/Styles/Site.css" rel="nofollow noreferrer noopener" rel="stylesheet" type="text/css" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0px; padding: 0px }
      #map_canvas { height: 100% }
    </style>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script type="text/javascript"
        src="https://maps.google.com/maps/api/js?sensor=true">
    </script>
    <script type="text/javascript">
        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);
        }

    </script>
    <asp:ContentPlaceHolder ID="HeadContent" runat="server">

    </asp:ContentPlaceHolder>
</head>
<body onload="initialize()">
    <form runat="server">
    <div class="page">
        <div class="header">
            <div class="title">
                <h1>
                    Google Maps in ASP.NET
                </h1>
            </div>
            <div class="loginDisplay">
                <asp:LoginView ID="HeadLoginView" runat="server" EnableViewState="false">
                    <AnonymousTemplate>
                        [ <a href="~/Account/Login.aspx" rel="nofollow noreferrer noopener" ID="HeadLoginStatus" runat="server">Log In</a> ]
                    </AnonymousTemplate>
                    <LoggedInTemplate>
                        Welcome <span class="bold"><asp:LoginName ID="HeadLoginName" runat="server" /></span>!
                        [ <asp:LoginStatus ID="HeadLoginStatus" runat="server" LogoutAction="Redirect" LogoutText="Log Out" LogoutPageUrl="~/"/> ]
                    </LoggedInTemplate>
                </asp:LoginView>
            </div>
            <div class="clear hideSkiplink">
                <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
                    <Items>
                        <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
                        <asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
                    </Items>
                </asp:Menu>
            </div>
        </div>
        <div class="main">
            <asp:ContentPlaceHolder ID="MainContent" runat="server"/>
        </div>
        <div class="clear">
        </div>
    </div>
    <div class="footer">

    </div>
    </form>
</body>
</html>

Default.aspx:

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">

</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

  <div id="map_canvas" style="width:100%; height:100%"></div>

</asp:Content>

Update: this is the rendered html

<!DOCTYPE html> 
<html> 
<head><title> 
    Home Page
</title><link href="Styles/Site.css" rel="nofollow noreferrer noopener" rel="stylesheet" type="text/css" /> 
    <style type="text/css"> 
      html { height: 100% }
      body { height: 100%; margin: 0px; padding: 0px }
      #map_canvas { height: 100% }
    </style> 
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> 
    <script type="text/javascript"

        src="https://maps.google.com/maps/api/js?sensor=true"> 
    </script> 
    <script type="text/javascript"> 
        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);
        }

    </script> 


</head> 
<body onload="initialize()"> 
    <form method="post" action="default.aspx" id="ctl01"> 
<div class="aspNetHidden"> 
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTY1NDU2MTA1MmRkgEGBoemMtm+/v6V+m9lmIvRj4NCUaPh/xvbFFRPTsmc=" /> 
</div> 


<script src="/googlemapstutorial/WebResource.axd?d=pX2KOH15DXBIWd9F3pw0pYRvxH0rCs_7BzgxTRUKsZkV8iILrBf16Um3jfikb78HXD5CWcorG2sj456pwVRsUev4lKFhNxwLEsZ0G3MsXkw1&amp;t=634222671270572046" type="text/javascript"></script> 
    <div class="page"> 
        <div class="header"> 
            <div class="title"> 
                <h1> 
                    Google Maps in ASP.NET
                </h1> 
            </div> 
            <div class="loginDisplay"> 

                        [ <a href="Account/Login.aspx" rel="nofollow noreferrer noopener" id="HeadLoginView_HeadLoginStatus">Log In</a> ]

            </div> 
            <div class="clear hideSkiplink"> 
                <a href="#NavigationMenu_SkipLink" rel="nofollow noreferrer noopener"><img alt="Skip Navigation Links" src="/googlemapstutorial/WebResource.axd?d=TJBKVc8nekHCgPywjGbDmMgRlrAm9FIu3FELc6xCCTlRxYfnY8nfoPOyAs8B8fawdRaonWVsHF9mLU3lY2PCkgjBIN2S1Hne4nX1WfWtaN01&amp;t=634222671270572046" width="0" height="0" style="border-width:0px;" /></a><div class="menu" id="NavigationMenu"> 
    <ul class="level1"> 
        <li><a class="level1" href="Default.aspx" rel="nofollow noreferrer noopener">Home</a></li><li><a class="level1" href="About.aspx" rel="nofollow noreferrer noopener">About</a></li> 
    </ul> 
</div><a id="NavigationMenu_SkipLink"></a> 
            </div> 
        </div> 
        <div class="main"> 


  <div id="map_canvas" style="width:100%; height:100%"></div> 


        </div> 
        <div class="clear"> 
        </div> 
    </div> 
    <div class="footer"> 

    </div> 

<script type='text/javascript'>new Sys.WebForms.Menu({ element: 'NavigationMenu', disappearAfter: 500, orientation: 'horizontal', tabIndex: 0, disabled: false });</script></form> 
</body> 
</html>

Contents hide

Answers:

Method 1

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Google is all Javascript, so the fact it’s in a Master page shouldn’t matter unless you have local path issues, which I don’t see.

I would use Firefox’s Error Console to see if there are any Javascript errors when the page loads.

EDIT

I thought it was some weird tag nesting issue, but it’s actually the fact that you’re using percentages for your dimensions. ‘100%’ means use fill the enclosing containers space, but if the container is empty we don’t get a size. If you set your map div to a fixed size, you will see your map.

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

0 0 votes

Article Rating