Question

I am trying to display a simple map in an ASP.NET page that has a Master Page. Everything works fine when I put the code in a static HTML page but nothing displays when using asp.net not even an error. When comparing the request/response in fiddler I can see that google is not sending any images back when using asp.net master page.

Here’s my client side code (I can hit a break point here):

<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100%; background-color:#eeeeee;}
    </style>

    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></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 mapDiv = document.getElementById("map_canvas");
            var map = new google.maps.Map(mapDiv, myOptions);
                }

    </script>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
    <div id="map_canvas" style="width:100%; height:100%"></div>
</asp:Content>

I call the script from the server:

Protected Sub Page_Load(sender As Object, e As System.EventArgs) Handles Me.Load
Dim mybodytag As HtmlGenericControl
mybodytag = Page.Master.FindControl("mainbody")
mybodytag.Attributes.Add("onload", "initialize()")
End Sub

Answer 1

Found the solution. I changed the div % to a fixed px size and it worked:

<div id="map_canvas" style="width:800px; height:600px"></div>