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 + "' /> " + 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>
<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();
}
}
}
