User1173249824 posted
<p>Hello gurus,</p>
<p>Please I have the intention of creating a geofence round my longitude and latitude value gotten from my database please I need a help on achieving this</p>
<p><em><strong>Here is my map.aspx code</strong></em></p>
<pre class="prettyprint "> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAz_BQGbtcC1Oq1hgFcv3rypgrHm_lvKtI&callback=initMap" type="text/javascript"></script>
<script type="text/javascript">
var markers = [JSON.parse('<%=ConvertDataTabletoString() %>')][0];
window.onload = function () {
var mapOptions = {
center: new google.maps.LatLng(markers[0].lat, markers[0].lng),
zoom: 15,
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 i = 0;
var interval = setInterval(function () {
var data = markers[i]
var myLatlng = new google.maps.LatLng(data.lat, data.lng);
var icon = "";
switch (data.description) {
case "Afr":
icon = "green";
break;
case "Cho":
icon = "blue";
break;
case "Cry":
icon = "purple";
break;
case "Den":
icon = "grey";
break;
case "Ebo":
icon = "slategray";
break;
case "Hep":
icon = "black";
break;
}
icon = "http://maps.google.com/mapfiles/ms/icons/" + icon + ".png";
var marker = new google.maps.Marker({
,
map: map,
title: data.title,
animation: google.maps.Animation.DROP,
icon: new google.maps.MarkerImage(icon)
});
(function (marker, data) {
google.maps.event.addListener(marker, "click", function (e) {
infoWindow.setContent("<b>Name:</b> " + data.Name + "<br/><b>Category:</b> " + data.Category );
infoWindow.open(map, marker);
});
})(marker, data);
latlngbounds.extend(marker.position);
i++;
if (i == markers.length) {
clearInterval(interval);
var bounds = new google.maps.LatLngBounds();
map.setCenter(latlngbounds.getCenter());
map.fitBounds(latlngbounds);
}
}, 80);
}
</script>
<section class="content">
<!-- Info boxes -->
<div class="row">
<div class="col-md-12">
<div class="box">
<div class="box-header with-border">
<h3 class="box-title">My Location</h3>
</div>
<div class="box-body">
<div class="row">
<div class="col-sm-12">
<div id="dvMap" style="width: 100%; height: 600px">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section></pre>
<p>here is my .cs Code</p>
<pre class="prettyprint "> protected void Page_Load(object sender, EventArgs e)
{
ConvertDataTabletoString();
}
public string ConvertDataTabletoString()
{
DataTable dt = new DataTable();
using (SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["ConnectionString"].ConnectionString))
{
using (SqlCommand cmd = new SqlCommand("select title=Disease,lat=latitude,lng=longitude,description,Category,Name from [Diseases]", con))
{
con.Open();
SqlDataAdapter da = new SqlDataAdapter(cmd);
da.Fill(dt);
System.Web.Script.Serialization.JavaScriptSerializer serializer = new System.Web.Script.Serialization.JavaScriptSerializer();
List<Dictionary<string, object>> rows = new List<Dictionary<string, object>>();
Dictionary<string, object> row;
foreach (DataRow dr in dt.Rows)
{
row = new Dictionary<string, object>();
foreach (DataColumn col in dt.Columns)
{
row.Add(col.ColumnName, dr[col]);
}
rows.Add(row);
}
return serializer.Serialize(rows);
}
}
}</pre>
<p>Any help will be of help </p>
<p>Thanks</p>
<p></p>
<p></p>
