Using Google Maps in ASP.Net Webforms - map not displaying

Question

I am a beginner to .NET programming and I am trying to put a Google Map in my code. This is a user control that I have inside a MultiView I am following this tutorial but I cannot get it to work. Can someone figure out what I am doing wrong? I have looked at similar SO questions but did not find a solution - I specify my div width and height, call the initialize function on page load, etc. I get no compilation errors - everything works just fine and the div is there, it just does not load the map. I tried putting "runat=server" in the script tag but that gave me a compilation error.

Relevant code:

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="StoreView.ascx.cs" Inherits="Practice.StoreView" %>
<asp:HiddenField ID="hdStoreName" runat="server" />
<asp:HiddenField ID="hdStateCode" runat="server" />
<div>
    <asp:Button runat="server" ID="btnBackToStatePage" Text="Back to state" OnClick="btnBackToStatePage_Click" /></div>
<div>
    <asp:Label ID="lblStorePageHeader" runat="server" Font-Size="X-Large"></asp:Label></div>
<div>
    <asp:Image runat="server" ID="imgStorefront" ImageUrl="" /></div>
<head>
<title></title>
    <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 map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        } 

    </script>
</head>
<body onload="initialize()">
    <div id="map_canvas" style="width: 300px; height: 300px; float: right;">
    </div> 
</body>

EDIT I just tried to just render the map by itself in an HTML page, shown below, and it did not show up there either. The words "This is a page" do show up, but not the map.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <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 map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        }

    </script>
</head>
<body>
    <span>This is a page.</span>
    <div id="map_canvas" style="width: 300px; height: 300px; float: right;">
    </div>
</body>
</html>

The network tab upon viewing the ASPX page that should contain my map:

The network tab upon viewing the HTML page that should contain the map:

Answer 1

The javascript function works because I tried it and it shows the map. Maybe you are missing something else?

This is my exact page and ![It shows this up ] 1

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

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <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 map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);
        }

    </script>
</head>
<body onload="initialize()">
   <form runat="server">
       <asp:HiddenField ID="hdStoreName" runat="server" />
       <asp:HiddenField ID="hdStateCode" runat="server" />
       <div>
       </div>
       <div>
          <asp:Label ID="lblStorePageHeader" runat="server" Font-Size="X-Large"></asp:Label>
       </div>
       <div>
           <asp:Image runat="server" ID="imgStorefront" ImageUrl="" />
       </div>
       <div id="map_canvas" style="width: 300px; height: 300px; float: right;">
       </div>
   </form>
</body>
</html>

Using Google Maps in ASP.Net Webforms - map not displaying

Question

1 answers

solution1
2 2015-08-05 14:49:28

Using Google Maps in ASP.Net Webforms - map not displaying

Question

1 answers

solution1 2 2015-08-05 14:49:28

solution1
2 2015-08-05 14:49:28