Introduction:
In my previous article, I explained Edit a nested or inner Grid and Show inner grid on expand/collapse on outer Grid . This article will describe Google Map
with its control in C# and vb.net.
You always show Google Map with their default controls set. You can set
these Google map control set value at run time also.
Description:
Here I will show you how we can
control Google map control set. I will also show marker with animation. I will display three controls:
Zoom: It is
slider containing ‘+’ and ‘-’ buttons.
Navigation Control: It is a pan control to move on map.
Street View Control: It is an icon that can be dragged and dropped.
Now first of all do some task in
your aspx page as shown below.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GoogleMapC.aspx.cs" Inherits="GoogleMapC"
%>
<!DOCTYPE html
PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Google
Map With Different Properties</title>
<style>
.headerdiv {float:
left; padding:
0 2%; position:
relative; width:
35%;}
.innerdiv {float:
left; padding-top:
11px; width:
100%; }
.innerdiv-map-chk { float:
left; width:
50%; }
.map-prev {float:
left; text-align:
center; width:
100%; }
.map-right-iblock {width:
100%;}
.style-r-box1-b2 { float:
left; width:
26px; border-radius:
7px; height:
26px;
background-color:
#e5e3df; border-color:
#161ed4; border-style:
solid;
border-width:
2px; overflow:
hidden; position:
relative;}
#route { height:
100%; width:
100%; overflow:
auto; margin-top:
3px; }
#route
.adp { padding:
1% 2%; width:
95%; font-size:
12px;
font-family: Arial; }
#map-canvas { height:
400px; margin-right:
0; width:
40%; }
#control {padding:
1% 2%; float:
left; width:
95%;
font-size: 14px; margin-top: 5px;}
#control
> div { padding:
2px 0; }
#control
> div
strong {width:
50px; float:
left; }
#control
> div
input[type=text] {border:
1px solid #000; width:
300px;
height:
18px;}
#control
> div
input[type=button]
{
border:
1px solid #000; width:
auto;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div class="headerdiv">
<div class="innerdiv">
<div class="innerdiv-map-chk">
<asp:CheckBox ID="chkZoomOption" Text="Zoom Options" Checked="true" runat="server" />
</div>
<div class="innerdiv-map-chk">
<asp:CheckBox ID="chkNavigationControl" Checked="true"
Text="Navigation
Control"
runat="server" />
</div>
</div>
<div class="innerdiv">
<div class="innerdiv-map-chk">
<asp:CheckBox ID="chkStreetViewControl" Checked="true"
Text="Street
View Control"
runat="server" />
</div>
</div>
</div>
<div id="control">
<div>
<strong>End:</strong>
<asp:TextBox ID="txtAddress" runat="server"></asp:TextBox>
</div>
<div>
<asp:Button ID="btnShow" runat="server" Text="Show Map" OnClick="btnShow_Click" />
</div>
<br />
<div class="map-prev">
<div class="map-right-iblock">
<div id="map-canvas" class="style-r-box1-b2" style='float: left;'>
</div>
<div id="route" style='float: left;'>
</div>
</div>
</div>
</div>
</form>
</body>
</html>
|
Once you finish your aspx page
design, let’s write some simple code.
C# Code:
using System;
public partial class GoogleMapC
: System.Web.UI.Page
{
public const string
DEFAULT_COORDINATES = "42.351505,-71.094455";
protected
void Page_Load(object
sender, EventArgs e)
{
if
(!IsPostBack)
{
LoadGoogleMap();
}
}
public void LoadGoogleMap()
{
string
strJavaScript = string.Empty;
strJavaScript = "<script
src=\"https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false\"
type=\"text/javascript\">\n</script>\n";
Page.ClientScript.RegisterClientScriptBlock(this.GetType(),
"OFB_DirectionMap",
strJavaScript);
strJavaScript = "<script type='text/javascript'>";
strJavaScript += "var directionsDisplay; var geocoder;";
strJavaScript += "var directionsService = new
google.maps.DirectionsService();";
strJavaScript += "function initialize() {";
strJavaScript += "geocoder = new google.maps.Geocoder();";
strJavaScript += "directionsDisplay = new
google.maps.DirectionsRenderer();";
strJavaScript += "var mapOptions = {";
strJavaScript += "zoom: 7,";
strJavaScript += "center: new google.maps.LatLng(" +
DEFAULT_COORDINATES + "),";
if
(chkZoomOption.Checked)
strJavaScript += "zoomControl: true, ";
else
strJavaScript += "zoomControl: false, ";
if
(chkNavigationControl.Checked)
strJavaScript += "panControl: true, ";
else
strJavaScript += "panControl: false, ";
if
(chkStreetViewControl.Checked)
strJavaScript += "streetViewControl: true, ";
else
strJavaScript += "streetViewControl: false, ";
strJavaScript += "};";
strJavaScript += "var map = new
google.maps.Map(document.getElementById('map-canvas'), mapOptions);";
strJavaScript += "directionsDisplay.setMap(map);";
strJavaScript += "directionsDisplay.setPanel(document.getElementById('route'));";
strJavaScript += "var address = document.getElementById('"
+ txtAddress.ClientID + "').value;";
strJavaScript += "geocoder.geocode( { 'address': address},
function(results, status) {";
strJavaScript += "if (status == google.maps.GeocoderStatus.OK)
{";
strJavaScript += "map.setCenter(results[0].geometry.location);";
strJavaScript += "var marker = new google.maps.Marker({";
strJavaScript += "map: map,";
strJavaScript += "position: results[0].geometry.location,";
strJavaScript += "animation:google.maps.Animation.BOUNCE";
strJavaScript += "});";
strJavaScript += "var infowindow = new
google.maps.InfoWindow({";
strJavaScript += "content:document.getElementById('" +
txtAddress.ClientID + "').value ";
strJavaScript += "});";
strJavaScript += "infowindow.open(map,marker);";
strJavaScript += "}";
strJavaScript += "});";
strJavaScript += "var myNode =
document.getElementById('route');";
strJavaScript += "while (myNode.firstChild) {";
strJavaScript += "myNode.removeChild(myNode.firstChild);";
strJavaScript += "}";
strJavaScript += "}";
strJavaScript += "google.maps.event.addDomListener(window, 'load',
initialize);";
strJavaScript += "google.maps.event.addDomListener(window,
'resize', initialize);";
strJavaScript += "</script>";
Page.ClientScript.RegisterStartupScript(this.GetType(), "onload",
strJavaScript, false);
}
protected
void btnShow_Click(object
sender, EventArgs e)
{
LoadGoogleMap();
}
}
|
VB.NET Code:
Imports System
Partial Class GoogleMapVB
Inherits
System.Web.UI.Page
Private
DEFAULT_COORDINATES As String = "42.351505,-71.094455"
Protected
Sub Page_Load(ByVal
sender As Object,
ByVal e As
EventArgs)
If Not Page.IsPostBack Then
LoadGoogleMap()
End If
End Sub
Private Sub LoadGoogleMap()
Dim
strJavaScript As String
= String.Empty
strJavaScript = "<script type='text/javascript'>"
strJavaScript += "var directionsDisplay; var geocoder;"
strJavaScript += "var directionsService = new google.maps.DirectionsService();"
strJavaScript += "function initialize() {"
strJavaScript += "geocoder = new google.maps.Geocoder();"
strJavaScript += "directionsDisplay = new
google.maps.DirectionsRenderer();"
strJavaScript += "var mapOptions = {"
strJavaScript += "zoom: 7,"
strJavaScript += "center: new google.maps.LatLng(" +
DEFAULT_COORDINATES + "),"
If
(chkZoomOption.Checked) Then
strJavaScript += "zoomControl: true, "
Else
strJavaScript += "zoomControl: false, "
End If
If
(chkNavigationControl.Checked) Then
strJavaScript += "panControl: true, "
Else
strJavaScript += "panControl: false, "
End If
If
(chkStreetViewControl.Checked) Then
strJavaScript += "streetViewControl: true, "
Else
strJavaScript += "streetViewControl: false, "
End If
strJavaScript += "};"
strJavaScript += "var map = new
google.maps.Map(document.getElementById('map-canvas'), mapOptions);"
strJavaScript += "directionsDisplay.setMap(map);"
strJavaScript += "directionsDisplay.setPanel(document.getElementById('route'));"
strJavaScript += "var address = document.getElementById('"
+ txtAddress.ClientID + "').value;"
strJavaScript += "geocoder.geocode( { 'address': address},
function(results, status) {"
strJavaScript += "if (status == google.maps.GeocoderStatus.OK)
{"
strJavaScript += "map.setCenter(results[0].geometry.location);"
strJavaScript += "var marker = new google.maps.Marker({"
strJavaScript += "map: map,"
strJavaScript += "position: results[0].geometry.location,"
strJavaScript += "animation:google.maps.Animation.BOUNCE"
strJavaScript += "});"
strJavaScript += "var infowindow = new
google.maps.InfoWindow({"
strJavaScript += "content:document.getElementById('" +
txtAddress.ClientID + "').value "
strJavaScript += "});"
strJavaScript += "infowindow.open(map,marker);"
strJavaScript += "}"
strJavaScript += "});"
strJavaScript += "var myNode =
document.getElementById('route');"
strJavaScript += "while (myNode.firstChild) {"
strJavaScript += "myNode.removeChild(myNode.firstChild);"
strJavaScript += "}"
strJavaScript += "}"
strJavaScript += "google.maps.event.addDomListener(window, 'load',
initialize);"
strJavaScript += "google.maps.event.addDomListener(window,
'resize', initialize);"
strJavaScript += "</script>"
Page.ClientScript.RegisterStartupScript(GetType(Page),
"onload", strJavaScript, False)
End Sub
Protected
Sub btnShow_Click(ByVal
sender As Object,
ByVal e As
EventArgs)
LoadGoogleMap()
End Sub
End Class
|
Demo:
 |
No comments:
Post a Comment