DotNetOcean: 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.

In my previous article I have explained How to Scroll Page from Top to Bottom and from Bottom to Top UsingJquery/JavaScript , How to call javascript functionin code behind , Calling different page into a Divof another page using Javascript with progressBar , Snow falls using javascript , How to save image in different size in Asp.net .

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>

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>

</body>

</html>

Example 2:-(Shibashish.aspx)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Shibashish.aspx.cs" Inherits="Shibashish" %>

<!DOCTYPE html>

type="text/javascript"></script>

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>

<div>

<asp:TextBox ID="txtBoxAddress" runat="server" />

</div>

</form>

</body>

</html>

Example 3:-(GoogleShibashish.aspx)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="GoogleShibashish.aspx.cs" Inherits="GoogleShibashish" %>

<!DOCTYPE html>

type="text/javascript"></script>

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>

<asp:HiddenField ID="hdnLattitude" runat="server" />

<asp:HiddenField ID="hdnLongitude" runat="server" />

<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

Labels

Monday, November 19

How To use google map in asp.net

No comments:

Post a Comment

.