神刀安全网

Google Map Settings And Google Map From – Marking With Info TextBox

We will implement  these very dynamic things in individual records where we display each friend travelling from – to with marking.

We have used the following things:

  1. DBML
    Named: GoogleMapDataClasses.DBML
  2. WebForm
    Named: Default.aspx
    Inside Default.aspx, we used:

    ScriptManager

    UpdatePanel

    Repeater Control

  3. Web.Config
    MS SQL Server’s Database settings.
  4. Database: MBKTEST
    Table: tblGoogleMapFromTo

First, we understand Javascript which render our map on page.

<script src="http://maps.googleapis.com/maps/api/js"></script>   

(This line very important which used GOOGLE MAP APIs)

(We are calling function named MYFUNCTION. MYFUNCTION call INITIALIZE function.)

<script>       function initialize(frmlat, frmlong, tolat, tolong, maparea)       {           var mapProp = {               center: new google.maps.LatLng(frmlat, frmlong),               zoom: 8,               mapTypeId: google.maps.MapTypeId.ROADMAP           };           (Here we are setting FROM and TO place               for marking.)           var fromplace = new google.maps.LatLng(frmlat, frmlong);           var toplace = new google.maps.LatLng(tolat, tolong);           var myTrip = [fromplace, toplace];           var flightPath = new google.maps.Polyline(           {               path: myTrip,               (Here we had passed TRIP from– To settings.)               strokeColor: "#0000FF",               (Color settings of Line under a map)               strokeOpacity: 0.8,               (Transaprency settings of Line under a map)               strokeWeight: 2(Thickness of Line under a map)           });           var map = new google.maps.Map(document.getElementById(maparea), mapProp);           flightPath.setMap(map);       }   </script>      <script>       function MyFunction(frmlat, frmlong, tolat, tolong, maparea)       {           document.getElementById(maparea).style.display = "block";           initialize(frmlat, frmlong, tolat, tolong, maparea);           (We are calling INITIALIZE               function.)       }   </script>   

mapTypeId: google.maps.MapTypeId.ROADMAP

Map Type Id given below with description.

There are following types of MapTypeId you can change:

GOOGLE MAP TYPE DESCRIPTION
HYBRID To display roads and city names
ROADMAP To displays normal map (Default type of map)
SATELLITE To displays satellite map
TERRAIN To displays terrain, mountains, rivers, etc.

Step by Step implementation of Google Map

  1. Create a new website project named: “ GoogleMap ”.
    Google Map Settings And Google Map From - Marking With Info TextBox
  2. Insert a new WebForm called : “Default.aspx”.
    Right click on solution explorer, Select Add, Add New Item, then insert a new Web Form
    Google Map Settings And Google Map From - Marking With Info TextBox
  3. Double click on Web.config file and Configure database connectionstring settings in WEB.CONFIG.
    <connectionStrings>      <add name="GoogleMapConnectionString" connectionString="Data Source=112.118.AB.50A/sa;Initial Catalog=MBKTest;Persist Security Info=True;User ID=sa;Password=mbkerver" providerName="System.Data.SqlClient"/>   </connectionStrings>   
  4. Insert a new “LINQ to SQL Classes”.
    As you click for insesrting linq to sql classes this will ask for putting DBML inside APP_CODE , select YES.
    Note: Always put your DBML inside APP_CODE folder thats better.

Default.aspx file code:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" EnableEventValidation="true" %>          <!DOCTYPE html>          <html xmlns="http://www.w3.org/1999/xhtml">          <head id="Head1" runat="server">           <title></title>           <script src="http://maps.googleapis.com/maps/api/js"></script>           <script>               function initialize(frmlat, frmlong, tolat, tolong, maparea)               {                   var mapProp = {                       center: new google.maps.LatLng(frmlat, frmlong),                       zoom: 8,                       mapTypeId: google.maps.MapTypeId.ROADMAP                   };                   var fromplace = new google.maps.LatLng(frmlat, frmlong);                   var toplace = new google.maps.LatLng(tolat, tolong);                   var myTrip = [fromplace, toplace];                   var flightPath = new google.maps.Polyline(                   {                       path: myTrip,                       strokeColor: "#0000FF",                       strokeOpacity: 0.8,                       strokeWeight: 2                   });                   var map = new google.maps.Map(document.getElementById(maparea), mapProp);                   flightPath.setMap(map);               }           </script>              <script>               function MyFunction(frmlat, frmlong, tolat, tolong, maparea)               {                   document.getElementById(maparea).style.display = "block";                   initialize(frmlat, frmlong, tolat, tolong, maparea);               }           </script>       </head>          <body style="background-color:lavender;">              <form id="form1" runat="server">               <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>               <asp:UpdatePanel ID="UpdatePanel1" runat="server">                   <ContentTemplate>                       <asp:Repeater ID="rptFriend" runat="server" OnItemDataBound="rptFriend_ItemDataBound" OnItemCommand="rptFriend_ItemCommand">                           <ItemTemplate>                               <asp:HiddenField ID="hdnFromLat" runat="server" Value='<%# Eval("frmlat")%>' />                               <asp:HiddenField ID="hdnFromLong" runat="server" Value='<%# Eval("frmlong")%>' />                               <asp:HiddenField ID="hdnToLat" runat="server" Value='<%# Eval("tolat")%>' />                               <asp:HiddenField ID="hdnToLong" runat="server" Value='<%# Eval("tolong")%>' /> Friend Name <b><asp:Label ID="lblName" runat="server" Text='<%# Eval("name")%>'></asp:Label></b><br /><br /> Mobile Number <b><asp:Label ID="lblmobile" runat="server" Text='<%# Eval ("mobile")%>'></asp:Label></b><br /><br /> From Lat-Long <b><asp:Label ID="lblFromLatLong" runat="server" Text='<%# Eval("frmlat") +" ---- "+Eval("frmlong") %>' ></asp:Label></b><br /><br /> To Lat-Long <b><asp:Label ID="lblToLatLong" runat="server" Text='<%# Eval("tolat") + " ---- " + Eval("tolong") %>' ></asp:Label></b><br /> <br />                                  <b>Travelling</b>                               <asp:Label ID="Label1" runat="server" Text='<%# Eval("description")%>'></asp:Label>                               <br />                               <br />                               <asp:Button ID="btnMap" runat="server" Text="Display Map" CommandName="MAP" />                               <div id='MapArea' runat="server" style="width: 1100px; height: 200px;display:none">                               </div>                               <hr>                           </ItemTemplate>                       </asp:Repeater>                   </ContentTemplate>               </asp:UpdatePanel>               <br />               <br />              </form>       </body>          </html>   

Default.aspx.cs file code:

using System;   using System.Collections.Generic;   using System.Linq;   using System.Web;   using System.Web.UI;   using System.Web.UI.HtmlControls;   using System.Web.UI.WebControls;   public partial class _Default: System.Web.UI.Page   {       protected void Page_Load(object sender, EventArgs e)       {           GoogleMapDataClassesDataContext db = new GoogleMapDataClassesDataContext();           dynamic FriendList = db.tblGoogleMapFromTos.ToList();           rptFriend.DataSource = FriendList;           rptFriend.DataBind();       }       protected void MapRequest(WebControl control, string frmLat, string frmLong, string toLat, string toLong, string MapArea)       {           string postBackReference = Page.ClientScript.GetPostBackEventReference(control, String.Empty);           string           function = String.Format("javascript:MyFunction('{0}', '{1}', '{2}', '{3}', '{4}' );",               frmLat,               frmLong,               toLat,               toLong,               MapArea);           control.Attributes.Add("onclick", function);       }       protected void rptFriend_ItemDataBound(object sender, RepeaterItemEventArgs e)       {           WebControl btnMap = ((WebControl) e.Item.FindControl("btnMap"));           HiddenField hdnFrmLat = new HiddenField();           hdnFrmLat = (HiddenField) e.Item.FindControl("hdnFromLat");           string frmlat = hdnFrmLat.Value;           HiddenField hdnFromLong = new HiddenField();           hdnFromLong = (HiddenField) e.Item.FindControl("hdnFromLong");           string frmlong = hdnFromLong.Value;           HiddenField hdnToLat = new HiddenField();           hdnToLat = (HiddenField) e.Item.FindControl("hdnToLat");           string Tolat = hdnToLat.Value;           HiddenField hdnToLong = new HiddenField();           hdnToLong = (HiddenField) e.Item.FindControl("hdnToLong");           string Tolong = hdnToLong.Value;           HtmlGenericControl myDiv = e.Item.FindControl("MapArea") as HtmlGenericControl;           MapRequest(btnMap, frmlat, frmlong, Tolat, Tolong, myDiv.ClientID);       }       protected void rptFriend_ItemCommand(object source, RepeaterCommandEventArgs e)       {       }   }   

Web.Config file code:

<?xml version="1.0"?>   <!--   For more information on how to configure your ASP.NET application, please visit   http://go.microsoft.com/fwlink/?LinkId=169433   -->   <configuration>       <system.web>           <compilation debug="true" strict="false" explicit="true" targetFramework="4.5">               <assemblies>                   <add assembly="System.Data.Linq, Version=4.0.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089" />               </assemblies>           </compilation>           <httpRuntime targetFramework="4.5" />       </system.web>       <connectionStrings>           <add name="GoogleMapConnectionString" connectionString="Data Source=112.118.AB.50A/sa;Initial Catalog=MBKTest;Persist Security Info=True;User ID=sa;Password=mbkerver" providerName="System.Data.SqlClient" />       </connectionStrings>   </configuration>   

Output

Click on Button of any row you get MAP visible:

Google Map Settings And Google Map From - Marking With Info TextBox

My previous article link:

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » Google Map Settings And Google Map From – Marking With Info TextBox

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址