saving circular geofence co-ordinates from google map

Question

4.00/5 (2 votes)

See more:

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:

JavaScript

<%@ 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"> 

    //Global variables 
    var map; 
    var geocoder = null;
    var addressMarker;
    var bounds = new GLatLngBounds; //Circle Bounds 
    var Circle; //Circle object 
    var CirclePoints = []; //Circle drawing points 
    var CircleCenterMarker, CircleResizeMarker; 
    var circle_moving = false; //To track Circle moving 
    var circle_resizing = false; //To track Circle resizing 
    var radius = 1; //1 km 
    var min_radius = 0.5; //0.5km 
    var max_radius = 5; //5km 

    //Circle Marker/Node icons 
    var redpin = new GIcon(); //Red Pushpin Icon to resize the circle
    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(); //Green Arrow Icon to move the circle
    garrow.image = "http://maps.google.com/mapfiles/arrow.png"; 
    garrow.iconSize = new GSize(45, 45); 
    garrow.iconAnchor = new GPoint(10, 32); 

    function initialize() 
    { 
        //Initialize Google Map 
        if (GBrowserIsCompatible()) 
        { 
            var lat1 = document.getElementById("txtlat1").value;
            var lng1 = document.getElementById("txtlng1").value;
        
            var map_center = new GLatLng(lat1, lng1); // 19.09353  72.854891
        
            map = new GMap2(document.getElementById("map_canvas")); //New GMap object 
            map.setCenter(map_center); 

            var ui = new GMapUIOptions(); //Map UI options 
            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); //Set Map UI options 

            addCircleCenterMarker(map_center); 
            addCircleResizeMarker(map_center); 
            drawCircle(map_center, radius); 
            
            geocoder = new GClientGeocoder(); 
        } 
    } 

    // Adds Circle Center marker 
    function addCircleCenterMarker(point) 
    { 
        var markerOptions = { icon: garrow, draggable: true }; 
        CircleCenterMarker = new GMarker(point, markerOptions); 
        map.addOverlay(CircleCenterMarker); //Add marker on the map 
        GEvent.addListener(CircleCenterMarker, 'dragstart', function() 
        { 
            //Add drag start event 
            circle_moving = true; 
        }); 
        GEvent.addListener(CircleCenterMarker, 'drag', function(point) 
        { 
            //Add drag event 
            drawCircle(point, radius); 
        }); 
        GEvent.addListener(CircleCenterMarker, 'dragend', function(point) 
        { 
            //Add drag end event 
            circle_moving = false; 
            drawCircle(point, radius); 
        }); 
        
    } 
    
    // Adds Circle Resize marker 
    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); //Add marker on the map 
        GEvent.addListener(CircleResizeMarker, 'dragstart', function() 
        { 
            //Add drag start event 
            circle_resizing = true; 
        }); 
        GEvent.addListener(CircleResizeMarker, 'drag', function(point) 
        { 
            //Add drag event 
            var new_point = new GLatLng(map_center.lat(), point.lng()); //to keep resize marker on horizontal line 
            var new_radius = new_point.distanceFrom(map_center) / 1000; //calculate new radius 
            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) 
        { 
            //Add drag end event 
            circle_resizing = false; 
            var new_point = new GLatLng(map_center.lat(), point.lng()); //to keep resize marker on horizontal line 
            var new_radius = new_point.distanceFrom(map_center) / 1000; //calculate new radius 
            if (new_radius < min_radius) 
                new_radius = min_radius; 
            if (new_radius > max_radius) 
                new_radius = max_radius; 
            drawCircle(map_center, new_radius); 
        }); 
    } 

    //Draw Circle with given radius and center 
    function drawCircle(center, new_radius) 
    { 
        //Circle Drawing Algorithm from: http://koti.mbnet.fi/ojalesa/googlepages/circle.htm 

        //Number of nodes to form the circle 
        var nodes = new_radius * 40; 
        if(new_radius < 1) nodes = 40; 

        //calculating km/degree 
        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)]); //place circle resize marker 
        CirclePoints.push(CirclePoints[0]); //close the circle polygon 
        if (Circle) 
        { 
            map.removeOverlay(Circle); //Remove existing Circle from Map
        }  
        var fillColor = (circle_resizing || circle_moving) ? 'green' : 'white'; //Set Circle Fill Color 
        Circle = new GPolygon(CirclePoints, '#0000FF', 2, 1, fillColor, 0.2); //New GPolygon object for Circle 
        map.addOverlay(Circle); //Add Circle Overlay on the Map 
        radius = new_radius; //Set global radius 
        map_center = center; //Set global map_center 
        if (!circle_resizing && !circle_moving) 
        { 
            //Fit the circle if it is not moving or resizing 
            fitCircle(); 
            //Circle drawing complete trigger function goes here 
        } 
    } 

    //Fits the Map to Circle bounds 
    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>

Posted 7-Nov-11 0:44am

debo_india

Add a Solution

Comments

thatraja 7-Nov-11 8:21am

What's the problem? any error

debo_india 7-Nov-11 23:37pm

no error..just want to take the co-ordinates from GMap on click event & save these co-ordinates in database. i am not getting any clue about how to do that..

debo_india 7-Nov-11 23:39pm

No error..just want the code to retreive the co-ordinates from the map on click event. After retreiving them, i want to save them in database

thatraja 7-Nov-11 23:41pm

Check my answer

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

thatraja · Answer 1 · 2011-11-07T03:00:00

Solution 1

Check these

Google Maps in HTML, ASP.NET, PHP, JSP etc. with ease[^]
Google Maps JavaScript API V2 Reference - class GPolygon[^]

Here examples - Google Map & Database
Setting up Google Maps for ASP.NET and SQL Server[^]
Obtain Latitude and Longitude co-ordinates for an Address using ASP.NET and the Google Maps API[^]

Posted 7-Nov-11 3:00am

thatraja

Comments

debo_india 8-Nov-11 0:06am

hey, these links are useful..i am trying to use these for my assignment..thanks :)

thatraja 8-Nov-11 7:21am

Solved?

Stefan Zvonar 21-Jul-12 0:27am

Just to let you know, the links suggested in the solution above have changed address, new link:

Setting up Google Maps for ASP.NET and SQL Server:
http://stefanzvonar.com/2010/04/22/setting-up-google-maps-for-asp-net-and-sql-server/

Obtain Latitude and Longitude co-ordinates for an Address using ASP.NET and the Google Maps API:
http://stefanzvonar.com/2012/07/17/obtain-latitude-and-longitude-co-ordinates-for-an-address-using-the-bing-maps-ajax-control-7-0-and-asp-net-controls/