Post
Ask Question

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.

  1. <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.)
  1. <script>  
  2.     function initialize(frmlat, frmlong, tolat, tolong, maparea)  
  3.     {  
  4.         var mapProp = {  
  5.             center: new google.maps.LatLng(frmlat, frmlong),  
  6.             zoom: 8,  
  7.             mapTypeId: google.maps.MapTypeId.ROADMAP  
  8.         };  
  9.         (Here we are setting FROM and TO place  
  10.             for marking.)  
  11.         var fromplace = new google.maps.LatLng(frmlat, frmlong);  
  12.         var toplace = new google.maps.LatLng(tolat, tolong);  
  13.         var myTrip = [fromplace, toplace];  
  14.         var flightPath = new google.maps.Polyline(  
  15.         {  
  16.             path: myTrip,  
  17.             (Here we had passed TRIP from– To settings.)  
  18.             strokeColor: "#0000FF",  
  19.             (Color settings of Line under a map)  
  20.             strokeOpacity: 0.8,  
  21.             (Transaprency settings of Line under a map)  
  22.             strokeWeight: 2(Thickness of Line under a map)  
  23.         });  
  24.         var map = new google.maps.Map(document.getElementById(maparea), mapProp);  
  25.         flightPath.setMap(map);  
  26.     }  
  27. </script>  
  28.   
  29. <script>  
  30.     function MyFunction(frmlat, frmlong, tolat, tolong, maparea)  
  31.     {  
  32.         document.getElementById(maparea).style.display = "block";  
  33.         initialize(frmlat, frmlong, tolat, tolong, maparea);  
  34.         (We are calling INITIALIZE  
  35.             function.)  
  36.     }  
  37. </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”.



  2. Insert a new WebForm called : “Default.aspx”.

    Right click on solution explorer, Select Add, Add New Item, then insert a new Web Form



  3. Double click on Web.config file and Configure database connectionstring settings in WEB.CONFIG.

    1. <connectionStrings>  
    2.    <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"/>  
    3. </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:

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" EnableEventValidation="true" %>  
  2.   
  3.     <!DOCTYPE html>  
  4.   
  5.     <html xmlns="http://www.w3.org/1999/xhtml">  
  6.   
  7.     <head id="Head1" runat="server">  
  8.         <title></title>  
  9.         <script src="http://maps.googleapis.com/maps/api/js"></script>  
  10.         <script>  
  11.             function initialize(frmlat, frmlong, tolat, tolong, maparea)  
  12.             {  
  13.                 var mapProp = {  
  14.                     center: new google.maps.LatLng(frmlat, frmlong),  
  15.                     zoom: 8,  
  16.                     mapTypeId: google.maps.MapTypeId.ROADMAP  
  17.                 };  
  18.                 var fromplace = new google.maps.LatLng(frmlat, frmlong);  
  19.                 var toplace = new google.maps.LatLng(tolat, tolong);  
  20.                 var myTrip = [fromplace, toplace];  
  21.                 var flightPath = new google.maps.Polyline(  
  22.                 {  
  23.                     path: myTrip,  
  24.                     strokeColor: "#0000FF",  
  25.                     strokeOpacity: 0.8,  
  26.                     strokeWeight: 2  
  27.                 });  
  28.                 var map = new google.maps.Map(document.getElementById(maparea), mapProp);  
  29.                 flightPath.setMap(map);  
  30.             }  
  31.         </script>  
  32.   
  33.         <script>  
  34.             function MyFunction(frmlat, frmlong, tolat, tolong, maparea)  
  35.             {  
  36.                 document.getElementById(maparea).style.display = "block";  
  37.                 initialize(frmlat, frmlong, tolat, tolong, maparea);  
  38.             }  
  39.         </script>  
  40.     </head>  
  41.   
  42.     <body style="background-color:lavender;">  
  43.   
  44.         <form id="form1" runat="server">  
  45.             <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager>  
  46.             <asp:UpdatePanel ID="UpdatePanel1" runat="server">  
  47.                 <ContentTemplate>  
  48.                     <asp:Repeater ID="rptFriend" runat="server" OnItemDataBound="rptFriend_ItemDataBound" OnItemCommand="rptFriend_ItemCommand">  
  49.                         <ItemTemplate>  
  50.                             <asp:HiddenField ID="hdnFromLat" runat="server" Value='<%# Eval("frmlat")%>' />  
  51.                             <asp:HiddenField ID="hdnFromLong" runat="server" Value='<%# Eval("frmlong")%>' />  
  52.                             <asp:HiddenField ID="hdnToLat" runat="server" Value='<%# Eval("tolat")%>' />  
  53.                             <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 />  
  54.   
  55.                             <b>Travelling</b>  
  56.                             <asp:Label ID="Label1" runat="server" Text='<%# Eval("description")%>'></asp:Label>  
  57.                             <br />  
  58.                             <br />  
  59.                             <asp:Button ID="btnMap" runat="server" Text="Display Map" CommandName="MAP" />  
  60.                             <div id='MapArea' runat="server" style="width: 1100px; height: 200px;display:none">  
  61.                             </div>  
  62.                             <hr>  
  63.                         </ItemTemplate>  
  64.                     </asp:Repeater>  
  65.                 </ContentTemplate>  
  66.             </asp:UpdatePanel>  
  67.             <br />  
  68.             <br />  
  69.   
  70.         </form>  
  71.     </body>  
  72.   
  73.     </html>  
Default.aspx.cs file code:
  1. using System;  
  2. using System.Collections.Generic;  
  3. using System.Linq;  
  4. using System.Web;  
  5. using System.Web.UI;  
  6. using System.Web.UI.HtmlControls;  
  7. using System.Web.UI.WebControls;  
  8. public partial class _Default: System.Web.UI.Page  
  9. {  
  10.     protected void Page_Load(object sender, EventArgs e)  
  11.     {  
  12.         GoogleMapDataClassesDataContext db = new GoogleMapDataClassesDataContext();  
  13.         dynamic FriendList = db.tblGoogleMapFromTos.ToList();  
  14.         rptFriend.DataSource = FriendList;  
  15.         rptFriend.DataBind();  
  16.     }  
  17.     protected void MapRequest(WebControl control, string frmLat, string frmLong, string toLat, string toLong, string MapArea)  
  18.     {  
  19.         string postBackReference = Page.ClientScript.GetPostBackEventReference(control, String.Empty);  
  20.         string  
  21.         function = String.Format("javascript:MyFunction('{0}', '{1}', '{2}', '{3}', '{4}' );",  
  22.             frmLat,  
  23.             frmLong,  
  24.             toLat,  
  25.             toLong,  
  26.             MapArea);  
  27.         control.Attributes.Add("onclick", function);  
  28.     }  
  29.     protected void rptFriend_ItemDataBound(object sender, RepeaterItemEventArgs e)  
  30.     {  
  31.         WebControl btnMap = ((WebControl) e.Item.FindControl("btnMap"));  
  32.         HiddenField hdnFrmLat = new HiddenField();  
  33.         hdnFrmLat = (HiddenField) e.Item.FindControl("hdnFromLat");  
  34.         string frmlat = hdnFrmLat.Value;  
  35.         HiddenField hdnFromLong = new HiddenField();  
  36.         hdnFromLong = (HiddenField) e.Item.FindControl("hdnFromLong");  
  37.         string frmlong = hdnFromLong.Value;  
  38.         HiddenField hdnToLat = new HiddenField();  
  39.         hdnToLat = (HiddenField) e.Item.FindControl("hdnToLat");  
  40.         string Tolat = hdnToLat.Value;  
  41.         HiddenField hdnToLong = new HiddenField();  
  42.         hdnToLong = (HiddenField) e.Item.FindControl("hdnToLong");  
  43.         string Tolong = hdnToLong.Value;  
  44.         HtmlGenericControl myDiv = e.Item.FindControl("MapArea") as HtmlGenericControl;  
  45.         MapRequest(btnMap, frmlat, frmlong, Tolat, Tolong, myDiv.ClientID);  
  46.     }  
  47.     protected void rptFriend_ItemCommand(object source, RepeaterCommandEventArgs e)  
  48.     {  
  49.     }  
  50. }  
Web.Config file code:
  1. <?xml version="1.0"?>  
  2. <!--  
  3. For more information on how to configure your ASP.NET application, please visit  
  4. http://go.microsoft.com/fwlink/?LinkId=169433  
  5. -->  
  6. <configuration>  
  7.     <system.web>  
  8.         <compilation debug="true" strict="false" explicit="true" targetFramework="4.5">  
  9.             <assemblies>  
  10.                 <add assembly="System.Data.Linq, Version=4.0.0.0, Culture=neutral, PublicKeyToken=B77A5C561934E089" />  
  11.             </assemblies>  
  12.         </compilation>  
  13.         <httpRuntime targetFramework="4.5" />  
  14.     </system.web>  
  15.     <connectionStrings>  
  16.         <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" />  
  17.     </connectionStrings>  
  18. </configuration>  
Output 

Click on Button of any row you get MAP visible:

My previous article link:


Similar Articles