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

Manoj Kalla
May 23, 2016
3.8k
0
0
Article

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:

DBML

Named: GoogleMapDataClasses.DBML
WebForm

Named: Default.aspx

Inside Default.aspx, we used:

ScriptManager
UpdatePanel
Repeater Control
Web.Config

MS SQL Server's Database settings.
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

Create a new website project named: “GoogleMap”.
Insert a new WebForm called : “Default.aspx”.

Right click on solution explorer, Select Add, Add New Item, then insert a new Web Form
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>
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>