Click here to Skip to main content
15,880,905 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
See more:
i am trying to use very simple google map in asp.net but for some reasons and i am sure there will be some, map is not showing in aspx page.i am not that master in using tags and java script. following very famous asp.net/google map tutorial at coderproject. have tried many combos regarding loading src and script type.
currently js code is outside the form tag but it is not working inside the form tag either.
here is code

What I have tried:

ASP.NET
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!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 runat="server">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key= xxxxXfuVqTQRTy5AmZx9D3pHjkfHW4&sensor=false">
</script>
    <title></title>
</head>
<body>
<div id="map">
<script type="text/javascript">
    function InitializeMap() {
        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"), myOptions);
    }

    window.onload = InitializeMap;
</script>
<form id="form1" runat="server">    
    
    </form>
    </div>
    
</body>
</html>
Posted
Updated 15-Dec-16 6:30am
Comments
ZurdoDev 15-Dec-16 7:11am    
Your html is messed up. Move inside the form which also means to move the closing div inside the form tag as well. then move the script into your head.

1 solution

It's quite possible that the onload event will fire before the maps script has finished loading.

You also need to set an explicit height for the container element.
ASP.NET
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html>
<html>
<head runat="server">
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
    /* Always set the map height explicitly to define the size of the div element that contains the map. */
    #map {
        height: 400px;
    }
    </style>
</head>
<body>
    <div id="map"></div>
    
    <script>
    function InitializeMap() {
        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"), myOptions);
    }
    </script>
    
    <script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY&callback=InitializeMap" async defer></script>
</body>
</html>

Getting Started  |  Google Maps JavaScript API  |  Google Developers[^]
 
Share this answer
 
v3
Comments
mehdilahori 16-Dec-16 9:23am    
yeah...and to keep it more simple for any new beginner just put style="height: 400px" in div tag

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900