Monday, November 19

How To use google map in asp.net

Introduction:-
                 
                  Here I have explained how to create a Google map using javascript in asp.net.

Description:-
                
                  In this article I have given three different examples to create a Google map in your asp.net application. Also explained how to create latitude and longitude of an area using javascript function.I have provided the source code for three different examples.

Now take a look on my 3 examples.

Here is my Source Code for:-

Example 1:-(googleMap.aspx)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="googleMap.aspx.cs" Inherits="googleMap" %>
<!DOCTYPE html>
<html>
<head>
 
<title>This is my first Google Maps Example</title>
 
</head>
<body onload="initializeMap()">
 
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false"></script>
 
<script type="text/javascript">
 
var infowindow = null;
 
function initializeMap() {
 
var centerMap = new google.maps.LatLng(39.828175, -98.5795);
 
var myOptions = {
 
//you can set the required zoom of your place,I am setting here as 4
zoom: 4,
 
center: centerMap,
 
//You can set any type of map here,I am setting as roadmap
 
mapTypeId: google.maps.MapTypeId.ROADMAP
 
}
var map = new google.maps.Map(document.getElementById("map"), myOptions);
 
setAreaMarkers(map, sites);
 
infowindow = new google.maps.InfoWindow({
 
});
}
var sites =
 
[
 
['Mount Evans', 39.58108, -105.63535, 4, 'This is the place in Mount Evans.</br>Now you are in Mount Evans'],
 
['Badlands National Park', 43.785890, -101.90175, 1, 'Now you are in  Badlands National Park'],
 
];
function setAreaMarkers(map, markers) {
 
for (var i = 0; i < markers.length; i++) {
 
var sites = markers;
 
//It will create the latitude and longitude
 
var siteLatLng = new google.maps.LatLng(sites[1], sites[2]);
 
//It will position your marker point
 
var marker = new google.maps.Marker({
 
position: siteLatLng,
 
map: map,
 
title: sites[0],
 
zIndex: sites[3],
 
html: sites[4]
 
});
//you can set your icon file here
 
iconFile = 'Images/A.png ';
 
//Here you set the marker icon
 
marker.setIcon(iconFile)
 
//Event raise when you will click the marker on the map.
 
google.maps.event.addListener(marker, "click", function () {
 
infowindow.setContent(this.html);
 
infowindow.open(map, this);
 
});
}
}
</script>
 
<div id="map" style="width: 600px; height: 500px;"></div>
 
</body>
</html>

Example 2:-(Shibashish.aspx)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Shibashish.aspx.cs" Inherits="Shibashish" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=<YOUR_API_KEY>&sensor=false"
type="text/javascript"></script>
 
<title></title>
<script type="text/javascript">
 
var map;
 
var geocoder;
 
function initializeMap() {
 
//It will check for browser compatibility
 
if (GBrowserIsCompatible()) {
 
map = new GMap2(document.getElementById("map"));
 
//You can set a center for your map view here
 
map.setCenter(new GLatLng(51.5, -0.1), 10);
 
map.setUIToDefault();
geocoder = new GClientGeocoder();
 
 
}
}
function showAreaAddress() {
 
var txtBoxAddress = document.getElementById("<%=txtBoxAddress.ClientID %>");
 
var addressinfo  = txtBoxAddress.value;
 
geocoder.getLatLng(
 
addressinfo ,
 
function (point) {
 
if (!point) {
 
alert(addressinfo  + " not found");
 
}
else {
 
map.setCenter(point, 15);
 
var marker = new GMarker(point);
 
map.addOverlay(marker);
 
marker.openInfoWindow(addressinfo );
 
}
}
);
}
</script>
</head>
 
<body onload="initializeMap()" onunload="GUnload()">
 
<form id="form1" runat="server">
 
<div>
 
<asp:TextBox ID="txtBoxAddress" runat="server" />
 
<input type="button" value="Find Area" onclick="showAreaAddress();" />
 
</div>
 
<div id="map" style="width: 600px; height: 600px"></div>
 
</form>
 
</body>
</html>

Example 3:-(GoogleShibashish.aspx)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GoogleShibashish.aspx.cs" Inherits="GoogleShibashish" %>
 
<!DOCTYPE html>
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=<YOUR_API_KEY>&sensor=false"
type="text/javascript"></script>
 
<title></title>
<script type="text/javascript">
 
var map;
 
var geocoder;
 
function initializeMap() {
 
//Checking for compatibility of browsers
 
if (GBrowserIsCompatible()) {
 
map = new GMap2(document.getElementById("map"));
 
var center = new GLatLng(51.5, -0.1);
 
map.setCenter(center, 10);
 
map.setUIToDefault();
 
var marker = new GMarker(center, { draggable: true });
 
map.addOverlay(marker);
 
marker.openInfoWindow("Please Drag the marker to a specific position for set");
 
GEvent.addListener(marker, "dragstart", function () {
 
map.closeInfoWindow();
 
 
});
GEvent.addListener(marker, "dragend", function () {
 
var hdnLattitude = document.getElementById("<%=hdnLattitude.ClientID %>");
 
var hdnLongitude = document.getElementById("<%=hdnLongitude.ClientID %>");
 
hdnLattitude.value = this.getLatLng().lat();
 
hdnLongitude.value = this.getLatLng().lng();
 
marker.openInfoWindow("Your New position has been successfully set");
 
});
}
}
</script>
</head>
<body onload="initializeMap()" onunload="GUnload()">
 
<form id="form1" runat="server">
 
<asp:HiddenField ID="hdnLattitude" runat="server" />
 
<asp:HiddenField ID="hdnLongitude" runat="server" />
 
<div id="map" style="width: 500px; height: 500px"></div>
 
<asp:Button ID="btnSubmit" runat="server" Text="Submit"
OnClick="btnSubmit_Click" />
 
</form>
</body>
</html>

GoogleShibashish.aspx.cs

using System;
 
using System.Collections.Generic;
 
using System.Linq;
 
using System.Web;
 
using System.Web.UI;
 
using System.Web.UI.WebControls;
 
public partial class GoogleShibashish: System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
 
}
protected void btnSubmit_Click(object sender, EventArgs e)
{
 
Response.Write("Latitude is: " + hdnLattitude.Value + " Longitude is: " + hdnLongitude.Value);
 
}
}

You just try all the above three examples to see different outputs.
Keep coding....

Thanks
Shibashish Mohanty
 

No comments:

Post a Comment

Please don't spam, spam comments is not allowed here.

ShibashishMnty
shibashish mohanty