How to add Google Map in asp.net

Today I have added Google Map my asp.net application successfully !! Don't worry it's not a big deal. Very easy and you will find a lots of article, tutorial about it. For using google map you just need a google account for google map api and basic JavaScript knowledge. For non commercial use google map is free.

In aspx page add Google Map API KEY in header part of html....like this
<head >
<script src="http://maps.google.com/maps?file=api&v=2& key=ABQIAAAAclK0B2lXQwV5lPy1rLiTFBSN1aiKepvDswXjKa4j2DDWdYvOjhQMO1tywqS8ObgP5dtO70AyyArhzA"
type="text/javascript"> </script >
</head>
You can get your own google map api key from this link. You can place your url
 in " My web site url " box. One can also get api key for http://localhost. See the below pictures...

http://code.google.com/apis/maps/signup.html
0

In html body take a <div> with a height and width. It is used for loading google map in your application. Like this..
<form id="form1" runat="server">
<div>
<div id="Gmap" style="width: 700px; height: 700px"></div>
</div>
</form>
Then place this javascript code before close the </head> tag:
<script type="text/javascript">
var map = null;
var geocoder = null;

function loadGmap() {
if (GBrowserIsCompatible()) {
var point;
var map = new GMap2(document.getElementById("Gmap"));

map.addControl(new GOverviewMapControl());
map.enableDoubleClickZoom();
map.enableScrollWheelZoom();
map.addControl(new GMapTypeControl());
map.addControl(new GSmallMapControl());
var address = gmapAddress;
point = new GLatLng(gmapLat,gmapLng);//new GLatLng(22.592057, 88.421815);

var marker = new GMarker(point);
map.setCenter(point, 17);
map.addOverlay(marker);
map.setMapType(G_HYBRID_MAP);
GEvent.addListener(marker, "mouseover", function() { marker.openInfoWindowHtml(address); });
marker.openInfoWindowHtml(address);
map.setCenter(point, 17);
}
}

//]]>
</script >
In this javascript function use several functions for getting some google map features ....
GBrowserIsCompatible()-- its a function which will return true only if your browser is compatible with google map.
GMap2 -- function takes the control to load and returns a map object to the reference div.
addControl() --add a new control to the map
GOverviewMapControl() -- it will be shown an overview of the map just in the right hand bottom corner to the map.
GSmallMapControl() -- add a zoom control to the map
GMapTypeControl() -- add new map type control in gmap. There are mainly 3 types of map, one is Normal, Satellite and Hybrid.
enableDoubleClickZoom -- Doubleclick zoom is available to gmap.
enableScrollWheelZoom -- Scrollwheel for mouse is available to gmap.
Add a google map load function in body tag..

< body onload="loadGmap();" onunload="GUnload()" style=" background-color:Transparent" >

You will get more from these links.. very useful reference for developers..
http://www.codeproject.com/KB/scripting/Use_of_Google_Map.aspx
http://www.codeproject.com/KB/web-image/Google_map.aspx

Comments

Anonymous said…
I love your site, but honestly tell you that you need more for him to monitor those who commented with your records
Ahsan Murshed said…
thanks for your suggestions....
Anonymous said…
great blog


[url=http://bradhsfxga.wordpress.com/]برامج[/url]
[url=http://bradhsfxga.wordpress.com/]برامج التحميل[/url]
Anonymous said…
Hello, you site is very funny he told me to cheer up .. Merry Christmas.
Anonymous said…
You burn ... .. thought ... .... Cool !!!!!! 10
Anonymous said…
Merry Christmas and Happy New Year, may all your wishes come true!
Anonymous said…
Merry Christmas and Happy New Year, may all your wishes come true!
Anonymous said…
Merry Christmas! Let the new year will bring a lot of money
Anonymous said…
Interesting for me//
/
Anonymous said…
Useful publication and excellent presentation!
Anonymous said…
Good article. Thank you.
http://ordererimin.putblog.com/2011/01/10/information-difenoxin/
Anonymous said…
Hi Thanks for sharing your thoughts. Take care.

Popular posts from this blog

The model backing the 'MyDBContext' context has changed since the database was created. Either manually delete/update the database, or call Database.SetInitializer with an IDatabaseInitializer instance. For example, the DropCreateDatabaseIfModelChanges strategy will automatically delete and recreate the database, and optionally seed it with new data.

"This request has been blocked because sensitive information could be disclosed to third party web sites when this is used in a GET request. To allow GET requests, set JsonRequestBehavior to AllowGet."

Check/Uncheck all items in a CheckBoxList using Javascript