Google map in asp.netDotNetBoss

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.