CODEWITHSUNDEEP
jqueryasp.netgoogle-maps
Jim Evans
Jim Evans

Reputation: 6505

Issue with Google Maps API v3 and jQuery using ASP.Net Master and Child pages

I am just trying to test out Google Maps from jQuery in an ASP.Net Master \ Child page scenerio. I finally got around all the errors calling the api (correct key and parameters) and now everything runs just fine with no errors. I followed the execution through in debug many times and it appears to be executing just fine. The only problem is that the map does not show up no matter what I try. I am using an example from the Google API docs - following is the code with only my key changed :)

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html, body, #map-canvas {
        margin: 0;
        padding: 0;
        height: 100%;
      }
    </style>
    <script src="Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
    <script type="text/javascript"
      src="https://maps.googleapis.com/maps/api/js?key=MyKey&sensor=false">
    </script>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <h2>The map should apprear here</h2>
    <div id="map-canvas"/>


    <script type="text/javascript">
        function initialize() {
            var map = new google.maps.Map(
            document.getElementById('map-canvas'), {
                center: new google.maps.LatLng(37.4419, -122.1419),
                zoom: 13,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            });

                var marker = new google.maps.Marker({
                    position: new google.maps.LatLng(37.4419, -122.1419),
                    map: map
                });

        }
        google.maps.event.addDomListener(window, 'load', initialize);       
    </script>

</asp:Content>

Upvotes: 0

Views: 827

Answers (1)

Jay Patel
Jay Patel

Reputation: 647

Problem is your <div id="map-canvas"/> has no width and height set. Set it to some absolute values or percentage values.

Upvotes: 1

Related Questions