ASP.NET

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:

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs