Ref:
ASP.Net : Google Maps V3 with Multiple Markers Database Example
Here i have added an anchor tag in the infowindow and clicking on that a tag marker will be deleted and page get refresh to get the updated data from Database
HTML
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
function DeleteMarker(lat) {
$.ajax({
type: "POST",
url: "CS.aspx/DeleteMapMarker",
data: '{lat: ' + lat + '}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
alert("Marker has been deleted");
window.location.reload();
}
});
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<script type="text/javascript" src="http://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>
];
</script>
<script type="text/javascript">
window.onload = function () {
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({
maxWidth: 200,
maxHieght: 200
});
var map = new google.maps.Map(document.getElementById("dvMap"), mapOptions);
var removeBtn;
for (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
});
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent(data.description + "<a id='lnkDeleteMarker'onclick='DeleteMarker(" + data.lat + ")' title=" + data.lat + " href='#'>Delete</a>");
infoWindow.open(map, marker);
});
})(marker, data);
}
}
</script>
<div id="dvMap" style="width: 800px; height: 500px;">
</div>
</form>
</body>
</html>
Namespace
using System.Data;
using System.Configuration;
using System.Data.SqlClient;
using System.Web.Services;
using System.Web.Script.Services;
C#
protected void Page_Load(object sender, EventArgs e)
{
if (!this.IsPostBack)
{
DataTable dt = this.GetData("select * from Locations");
rptMarkers.DataSource = dt;
rptMarkers.DataBind();
}
}
private DataTable GetData(string query)
{
string conString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
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;
}
}
}
}
[WebMethod]
[ScriptMethod]
public static void DeleteMapMarker(string lat)
{
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand("DELETE FROM Locations WHERE Latitude = @Latitude"))
{
cmd.CommandType = CommandType.Text;
cmd.Parameters.AddWithValue("@Latitude", lat);
cmd.Connection = con;
con.Open();
cmd.ExecuteNonQuery();
con.Close();
}
}
}
