Map not displaying while working in ASP.NET/C#

Question

I'm using sample code to display map based on locations in the sample database. That works fine.

If I try to use this code in local and try to display the locations which are in my database, that doesn't work.

Html Code

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style type="text/css">
        body
        {
            font-family: Arial;
            font-size: 10pt;
        }
    </style>
</head>
<body>
    <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
    <script type="text/javascript">
        var markers = [
        <asp:Repeater ID="rptMarkers" runat="server">
    <ItemTemplate>
             {
                 "title": '<%# Eval("Name") %>',
                 "lat": '<%# Eval("Latitude") %>',
                 "lng": '<%# Eval("Longitude") %>',
                 "description": '<%# Eval("Description") %>'
             }
    </ItemTemplate>
    <SeparatorTemplate>
        ,
    </SeparatorTemplate>
    </asp:Repeater>
        ];
        window.onload = function () {
            LoadMap();
        }
        function LoadMap() {
            var mapOptions = {
                center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
                zoom: 8,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };

            var infoWindow = new google.maps.InfoWindow();
            var latlngbounds = new google.maps.LatLngBounds();
            var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
            var legend = document.getElementById("legend");
            legend.innerHTML = "";
            for (var i = 0; i < markers.length; i++) {
                var data = markers[i]
                var myLatlng = new google.maps.LatLng(data.lat, data.lng);
                var marker = new google.maps.Marker({
                    position: myLatlng,
                    map: map,
                    title: data.title,
                    icon: data.icon
                });
                (function (marker, data) {
                    google.maps.event.addListener(marker, "click", function (e) {
                        infoWindow.setContent("<div style = 'width:100px;height:40px'>" + data.description + "</div>");
                        infoWindow.open(map, marker);
                    });
                })(marker, data);
                latlngbounds.extend(marker.position);

                legend.innerHTML += "<div style = 'margin:5px'><img align = 'middle' src = '" + marker.icon + "' />&nbsp;" + marker.title + "</div>";
            }

            navigator.geolocation.getCurrentPosition(function (p) {
                var latitude = p.coords.latitude;
                var longitude = p.coords.longitude;
                document.getElementById("<%=hfLat.ClientID %>").value = latitude;
                document.getElementById("<%=hfLon.ClientID %>").value = longitude;
                var coords = new google.maps.LatLng(latitude, longitude);
                var LatLng = new google.maps.LatLng(p.coords.latitude, p.coords.longitude);
                var marker = new google.maps.Marker({
                    position: LatLng,
                    map: map,
                    title: "<div style = 'height:20px;width:100px'><b>You are here:</b>"
                });
                google.maps.event.addListener(marker, "click", function (e) {
                    var infoWindow = new google.maps.InfoWindow();
                    infoWindow.setContent(marker.title);
                    infoWindow.open(map, marker);
                });
            });
            var bounds = new google.maps.LatLngBounds();
            map.setCenter(latlngbounds.getCenter());
            map.fitBounds(latlngbounds);
        }

    </script>
    <table border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                <div id="dvMap" style="width: 500px; height: 500px">
                </div>
            </td>
            <td id="legend" style="display:none;">
            </td>
            <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAV8AiebjdcoS-Ratewz-HDkFt7XCq3zOM&libraries=places&callback=initMap"></script>
        </tr>
    </table>
    <br />
    <br />
    <form id="form1" runat="server">
     <asp:HiddenField ID="hfLat" runat="server" />
    <asp:HiddenField ID="hfLon" runat="server" />
    <asp:Label  Text="Name" runat="server"></asp:Label>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        <asp:TextBox ID="txtname" runat="server"></asp:TextBox>
        <br /><br />
        <asp:Label Text="Description" runat="server"></asp:Label>
        <asp:TextBox ID="txtdescription" runat="server" TextMode="MultiLine"></asp:TextBox>
    <asp:Button ID="btnSave" runat="server" Text="Save" onclick="btnSave_Click" />
    </form>
</body>
</html>

PageLoad

string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!this.IsPostBack)
        {
            DataTable dt = this.GetData("select  * from FindLocation");
            rptMarkers.DataSource = dt;
            rptMarkers.DataBind();
        }
    }

GetData

private DataTable GetData(string query)
    {

        SqlCommand cmd = new SqlCommand(query);
        using (SqlConnection con = new SqlConnection(conString))
        {
            using (SqlDataAdapter sda = new SqlDataAdapter())
            {
                cmd.Connection = con;

                sda.SelectCommand = cmd;
                using (DataTable dt = new DataTable())
                {
                    sda.Fill(dt);
                    return dt;
                }
            }
        }
    }

Insert Query

protected void btnSave_Click(object sender, EventArgs e)
    {
        string latitude = hfLat.Value;
        string longitude = hfLon.Value;
        string Name = string.Empty;
        string Description = string.Empty;

        using (SqlConnection conn = new SqlConnection(conString))
        {
            using (SqlCommand cmdd = new SqlCommand("Insert into FindLocation(Name,Latitude,Longitude,Description)VALUES(@Name,@Latitude,@Longitude,@Description)"))
            {
                cmdd.Parameters.AddWithValue("@Name", txtname.Text);
                cmdd.Parameters.AddWithValue("@Latitude", latitude);
                cmdd.Parameters.AddWithValue("@Longitude", longitude);
                cmdd.Parameters.AddWithValue("@Description", txtdescription.Text);
                cmdd.Connection = conn;
                conn.Open();
                cmdd.ExecuteNonQuery();
                conn.Close();
            }
        }


    }

Answer 1

First of all you made a double call to the google API

(1) <script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAV8AiebjdcoS-Ratewz-HDkFt7XCq3zOM&libraries=places&callback=initMap"></script>

(2) <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>

so remove (2) from your code.

Second you mention in (1) url &callback=initMap so either change that to LoadMap or change LoadMap function name to initMap

Answer 2

I've found the mistake Sir @Pranav Patel.Whenever I use '(apostrophe) in the description text box (Example: I'm), an error has occurred.Once I remove, everything works fine, so I guess '(apostrophe) shouldn't be used in the description.

Answer 3

你调用的对象是空的

string conString = ConfigurationManager.ConnectionSteings[constr]. ConnectionString;

Map not displaying while working in ASP.NET/C#

Question

3 answers

solution1
1 2017-01-12 08:02:08

solution2
0 ACCPTED 2017-01-12 11:47:42

solution3
0 2020-07-05 04:45:59

Map not displaying while working in ASP.NET/C#

Question

3 answers

solution1 1 2017-01-12 08:02:08

solution2 0 ACCPTED 2017-01-12 11:47:42

solution3 0 2020-07-05 04:45:59

solution1
1 2017-01-12 08:02:08

solution2
0 ACCPTED 2017-01-12 11:47:42

solution3
0 2020-07-05 04:45:59