Hi all, i have created the following code to create a resizeable, circular geofence using google maps. It takes latitude & longitude values from the textboxes and places one marker at the desired location. This is the centre of the circular geofence. Another marker is placed at the boundary of the circular geofence. Now, I want to save the co-ordinates in database. Pl help.
Code:
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="Default.aspx.vb" 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">
<title>Geofencing</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA3VhlbU84rXxxNJIwhgnCZBSuP9ZqWvsczlCo05gzZUKk3SVL5BQDjOk8Uo9hfXvOcey1b2DBrQ_rUA"
type="text/javascript">
</script>
<script type="text/javascript">
var map;
var geocoder = null;
var addressMarker;
var bounds = new GLatLngBounds;
var Circle;
var CirclePoints = [];
var CircleCenterMarker, CircleResizeMarker;
var circle_moving = false;
var circle_resizing = false;
var radius = 1;
var min_radius = 0.5;
var max_radius = 5;
var redpin = new GIcon();
redpin.image = "http://maps.google.com/mapfiles/ms/icons/red-pushpin.png";
redpin.iconSize = new GSize(32, 32);
redpin.iconAnchor = new GPoint(10, 32);
var garrow = new GIcon();
garrow.image = "http://maps.google.com/mapfiles/arrow.png";
garrow.iconSize = new GSize(45, 45);
garrow.iconAnchor = new GPoint(10, 32);
function initialize()
{
if (GBrowserIsCompatible())
{
var lat1 = document.getElementById("txtlat1").value;
var lng1 = document.getElementById("txtlng1").value;
var map_center = new GLatLng(lat1, lng1);
map = new GMap2(document.getElementById("map_canvas"));
map.setCenter(map_center);
var ui = new GMapUIOptions();
ui.maptypes = { normal:true, satellite:true, hybrid:true, physical:false }
ui.zoom = {scrollwheel:true, doubleclick:true};
ui.controls = { largemapcontrol3d:true, maptypecontrol:true, scalecontrol:true };
map.setUI(ui);
addCircleCenterMarker(map_center);
addCircleResizeMarker(map_center);
drawCircle(map_center, radius);
geocoder = new GClientGeocoder();
}
}
function addCircleCenterMarker(point)
{
var markerOptions = { icon: garrow, draggable: true };
CircleCenterMarker = new GMarker(point, markerOptions);
map.addOverlay(CircleCenterMarker);
GEvent.addListener(CircleCenterMarker, 'dragstart', function()
{
circle_moving = true;
});
GEvent.addListener(CircleCenterMarker, 'drag', function(point)
{
drawCircle(point, radius);
});
GEvent.addListener(CircleCenterMarker, 'dragend', function(point)
{
circle_moving = false;
drawCircle(point, radius);
});
}
function addCircleResizeMarker(point)
{
var resize_icon = new GIcon(redpin);
resize_icon.maxHeight = 0;
var markerOptions = { icon: resize_icon, draggable: true };
CircleResizeMarker = new GMarker(point, markerOptions);
map.addOverlay(CircleResizeMarker);
GEvent.addListener(CircleResizeMarker, 'dragstart', function()
{
circle_resizing = true;
});
GEvent.addListener(CircleResizeMarker, 'drag', function(point)
{
var new_point = new GLatLng(map_center.lat(), point.lng());
var new_radius = new_point.distanceFrom(map_center) / 1000;
if (new_radius < min_radius)
new_radius = min_radius;
if (new_radius > max_radius)
new_radius = max_radius;
drawCircle(map_center, new_radius);
});
GEvent.addListener(CircleResizeMarker, 'dragend', function(point)
{
circle_resizing = false;
var new_point = new GLatLng(map_center.lat(), point.lng());
var new_radius = new_point.distanceFrom(map_center) / 1000;
if (new_radius < min_radius)
new_radius = min_radius;
if (new_radius > max_radius)
new_radius = max_radius;
drawCircle(map_center, new_radius);
});
}
function drawCircle(center, new_radius)
{
var nodes = new_radius * 40;
if(new_radius < 1) nodes = 40;
var latConv = center.distanceFrom(new GLatLng(center.lat() + 0.1, center.lng())) / 100;
var lngConv = center.distanceFrom(new GLatLng(center.lat(), center.lng() + 0.1)) / 100;
CirclePoints = [];
var step = parseInt(360 / nodes) || 10;
var counter = 0;
for (var i = 0; i <= 360; i += step)
{
var cLat = center.lat() + (new_radius / latConv * Math.cos(i * Math.PI / 180));
var cLng = center.lng() + (new_radius / lngConv * Math.sin(i * Math.PI / 180));
var point = new GLatLng(cLat, cLng);
CirclePoints.push(point);
counter++;
}
CircleResizeMarker.setLatLng(CirclePoints[Math.floor(counter / 4)]);
CirclePoints.push(CirclePoints[0]);
if (Circle)
{
map.removeOverlay(Circle);
}
var fillColor = (circle_resizing || circle_moving) ? 'green' : 'white';
Circle = new GPolygon(CirclePoints, '#0000FF', 2, 1, fillColor, 0.2);
map.addOverlay(Circle);
radius = new_radius;
map_center = center;
if (!circle_resizing && !circle_moving)
{
fitCircle();
}
}
function fitCircle()
{
bounds = Circle.getBounds();
map.setCenter(bounds.getCenter(), map.getBoundsZoomLevel(bounds));
}
</script>
</head>
<body> <%--onload="initialize()" onunload="GUnload()">--%>
<div id="map_canvas" style="width: 500px; height: 300px"></div>
<form id="form1" runat="server">
<div>
<br />
<asp:Label ID="lbllat1" runat="server" Text="Enter the latitude :" Width="168px">
<asp:TextBox
ID="txtlat1" runat="server">
<br />
<asp:Label ID="lbllng1" runat="server" Text="Enter the longitude :" Width="168px">
<asp:TextBox ID="txtlng1" runat="server"><br />
<br />
<br />
<input id="btnSubmit" type="button" value="Submit" onclick="initialize()"/>
</div>
</form>
</body>
</html>