Tuesday, December 30, 2014

How to draw the Polygon in the Google Maps

Design Side Code:-
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
    CodeBehind="Polygon.aspx.cs" Inherits="Maps.Polygon" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&key=Need to Include API Key here"></script>
    <script type="text/javascript" src="../JavaScript/jquery.1.5.min.js"></script>
    <%--<script type="text/javascript" src="../JavaScript/jquery-1.8-ui.min.js"></script>
    <script type="text/javascript" src="../JavaScript/jquery.jqGrid.min.js"></script>
    <script type="text/javascript" src="../JavaScript/jquery.treeview.min.js"></script>
    <script type="text/javascript" src="../JavaScript/markerclusterer.js"></script>--%>
    <script type="text/javascript">
        var map;
        var MapCitys = [];

        function CreatingPolygon(GrpName, ArName) {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "Polygon.aspx/BindMapPoints",
                data: '{name: "' + GrpName + '",name1: "' + ArName + '" }',
                dataType: "json",
                success: function (data) {
                    var mapProp = {
                        center: new google.maps.LatLng(data.d[0].Latitude, data.d[0].Longitude),
                        zoom: 14,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };
                    map = new google.maps.Map(document.getElementById("idgoogleMap"), mapProp);

                    var TriangleCoordList = [];
                    for (var i = 0; i < data.d.length; i++) {

                        var triangleCoords = new google.maps.LatLng(data.d[i].Latitude, data.d[i].Longitude);
                        TriangleCoordList.push(triangleCoords);
                    }
                    bermudaTriangle = new google.maps.Polygon({
                        paths: TriangleCoordList,
                        strokeColor: "#FF0000",
                        strokeOpacity: 0.8,
                        strokeWeight: 3,
                        fillColor: "#FF0000",
                        fillOpacity: 0.35
                    });
                    bermudaTriangle.setMap(map);
                    MapCitys.push(bermudaTriangle);
                },
                error: function (result) {
                    alert("Error");
                }
            });
        };
        google.maps.event.addDomListener(window, 'load', CreatingPolygon('', ''));

    </script>
    <table width="100%">
        <tr>
            <td>
                <asp:Button runat="server" ID="btnPoly" Text="Generate Polygon" />
            </td>
        </tr>
        <tr>
            <td>
                <div id="idgoogleMap" style="width: 925px; height: 600px" />
            </td>
        </tr>
    </table>
</asp:Content>


CS File Code:-
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Web.Services;

namespace Maps
{
    public partial class Polygon : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
           

        }

        [WebMethod]
        public static MAPS[] BindMapPoints(string name, string name1)
        {
            DataSet ds = new DataSet();
            DataTable dt = new DataTable();
            List<MAPS> lstFencingCircle = new List<MAPS>();
            try
            {
               
                dt.Columns.Add("Latitude");
                dt.Columns.Add("Longitude");
                dt.Rows.Add("13.548630", "79.523961");
                dt.Rows.Add("13.559144", "79.517910");
                dt.Rows.Add("13.553345", "79.534389");
                dt.Rows.Add("13.544625", "79.540870");
                dt.Rows.Add("13.528374", "79.531707");

                foreach (DataRow dtrow in dt.Rows)
                {
                    MAPS objMAPS = new MAPS();
                    objMAPS.Latitude = dtrow["Latitude"].ToString();
                    objMAPS.Longitude = dtrow["Longitude"].ToString();
                    lstFencingCircle.Add(objMAPS);
                }
            }
            catch (Exception ex)
            {
                throw ex;
            }


            return lstFencingCircle.ToArray();
        }

        public class MAPS
        {
            public string Latitude;
            public string Longitude;
        }
    }

}



Read More »

How to display the Rectangle In the Google Maps using Asp.net C#

Design Source file:-
<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Rectangle.aspx.cs" Inherits="Maps.Rectangle" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&key=Need to include API Key here"></script>
    <script type="text/javascript" src="../JavaScript/jquery.1.5.min.js"></script>
    <%--<script type="text/javascript" src="../JavaScript/jquery-1.8-ui.min.js"></script>
    <script type="text/javascript" src="../JavaScript/jquery.jqGrid.min.js"></script>
    <script type="text/javascript" src="../JavaScript/jquery.treeview.min.js"></script>
    <script type="text/javascript" src="../JavaScript/markerclusterer.js"></script>--%>
    <script type="text/javascript">
        var map;
        var MapCitys = [];

        function CreatingRectangle(GrpName, ArName) {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "Rectangle.aspx/BindMapPoints",
                data: '{name: "' + GrpName + '",name1: "' + ArName + '" }',
                dataType: "json",
                success: function (data) {
                    var mapProp = {
                        center: new google.maps.LatLng(data.d[0].Latitude_SW, data.d[0].Longitude_SW),
                        zoom: 14,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };
                    map = new google.maps.Map(document.getElementById("idgoogleMap"), mapProp);

                    for (var i = 0; i < data.d.length; i++) {
                        //debugger;

                        var rectangle = new google.maps.Rectangle({
                            strokeColor: "##0000FF",
                            strokeOpacity: 0.8,
                            strokeWeight: 2,
                            fillColor: "#0000FF",
                            fillOpacity: 0.35,
                            map: map,
                            bounds: new google.maps.LatLngBounds(
                             new google.maps.LatLng(data.d[i].Latitude_SW, data.d[i].Longitude_SW),
                             new google.maps.LatLng(data.d[i].Latitude_NE, data.d[i].Longitude_NE))
                        });
                        MapCitys.push(rectangle);
                    }
                },
                error: function (result) {
                    alert("Error");
                }
            });
        };
        google.maps.event.addDomListener(window, 'load', CreatingRectangle('', ''));

    </script>
    <table width="100%">
        <tr>
            <td>
                <div id="idgoogleMap" style="width: 925px; height: 600px" />
            </td>
        </tr>
    </table>
</asp:Content>


CS file Code:-
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Web.Services;

namespace Maps
{
    public partial class Rectangle : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {


        }

        [WebMethod]
        public static MAPS[] BindMapPoints(string name, string name1)
        {
            DataSet ds = new DataSet();
            DataTable dt = new DataTable();
            List<MAPS> lstFencingCircle = new List<MAPS>();
            try
            {

                dt.Columns.Add("Latitude_SW");
                dt.Columns.Add("Longitude_SW");
                dt.Columns.Add("Latitude_NE");
                dt.Columns.Add("Longitude_NE");
                dt.Rows.Add("13.553345", "79.534389", "13.544625", "79.540870");

                foreach (DataRow dtrow in dt.Rows)
                {
                    MAPS objMAPS = new MAPS();
                    objMAPS.Latitude_SW = dtrow["Latitude_SW"].ToString();
                    objMAPS.Longitude_SW = dtrow["Longitude_SW"].ToString();
                    objMAPS.Latitude_NE = dtrow["Latitude_NE"].ToString();
                    objMAPS.Longitude_NE = dtrow["Longitude_NE"].ToString();
                    lstFencingCircle.Add(objMAPS);
                }
            }
            catch (Exception ex)
            {
                throw ex;
            }


            return lstFencingCircle.ToArray();
        }

        public class MAPS
        {
            public string Latitude_SW;
            public string Longitude_SW;
            public string Latitude_NE;
            public string Longitude_NE;
        }
    }

}




Read More »

How to display the Circles on the Google Maps in Asp.Net


Design Source File Code:-

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true" CodeBehind="Circle.aspx.cs" Inherits="Maps.Circle" %>
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false&key=Place the API Key Here"></script>
    <script type="text/javascript" src="../JavaScript/jquery.1.5.min.js"></script>
    <script type="text/javascript">
        var map;
        var MapCitys = [];

        function CreatingRectangle(GrpName, ArName) {
            $.ajax({
                type: "POST",
                contentType: "application/json; charset=utf-8",
                url: "Circle.aspx/BindMapPoints",
                data: '{name: "' + GrpName + '",name1: "' + ArName + '" }',
                dataType: "json",
                success: function (data) {
                    var mapProp = {
                        center: new google.maps.LatLng(data.d[0].Latitude, data.d[0].Longitude),
                        zoom: 14,
                        mapTypeId: google.maps.MapTypeId.ROADMAP
                    };
                    map = new google.maps.Map(document.getElementById("idgoogleMap"), mapProp);

                    LengthCir = data.d.length;
                    for (var i = 0; i < data.d.length; i++) {
                        amsterdam = new google.maps.LatLng(data.d[i].Latitude, data.d[i].Longitude);
                        var myCity = new google.maps.Circle({
                            center: amsterdam,
                            radius: data.d[i].Radius,
                            strokeColor: "#0000FF",
                            strokeOpacity: 0.8,
                            strokeWeight: 2,
                            fillColor: "#0000FF",
                            fillOpacity: 0.4,
                            map: map


                        });
                        MapCitys.push(myCity);
                    }
                },
                error: function (result) {
                    alert("Error");
                }
            });
        };
        google.maps.event.addDomListener(window, 'load', CreatingRectangle('', ''));

    </script>
    <table width="100%">
        <tr>
            <td>
                <div id="idgoogleMap" style="width: 925px; height: 600px" />
            </td>
        </tr>
    </table>
</asp:Content>


CS file Code:-

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Web.Services;

namespace Maps
{
    public partial class Circle : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {


        }

        [WebMethod]
        public static MAPS[] BindMapPoints(string name, string name1)
        {
            DataSet ds = new DataSet();
            DataTable dt = new DataTable();
            List<MAPS> lstFencingCircle = new List<MAPS>();
            try
            {

                dt.Columns.Add("Latitude");
                dt.Columns.Add("Longitude");
                dt.Columns.Add("Radius");
                dt.Rows.Add("13.548630", "79.523961", 90);
                dt.Rows.Add("13.559144", "79.517910", 90);
                dt.Rows.Add("13.553345", "79.534389", 90);
                dt.Rows.Add("13.544625", "79.540870", 90);
                dt.Rows.Add("13.528374", "79.531707", 90);

                foreach (DataRow dtrow in dt.Rows)
                {
                    MAPS objMAPS = new MAPS();
                    objMAPS.Latitude = dtrow["Latitude"].ToString();
                    objMAPS.Longitude = dtrow["Longitude"].ToString();
                    objMAPS.Radius = Convert.ToInt16(dtrow["Radius"].ToString());
                    lstFencingCircle.Add(objMAPS);
                }
            }
            catch (Exception ex)
            {
                throw ex;
            }


            return lstFencingCircle.ToArray();
        }

        public class MAPS
        {
            public string Latitude;
            public string Longitude;
            public int Radius;
        }
    }
}




















Read More »