Introduction:
Here I will explain about, How to integrate the Google map
in asp.net web site.
Description:
First for Google map integration you need to get the API key
from Google website. In before there is no limit for generating API key per day
for Google map. But now the Google introduced on October 1st some
limitation for using Google map.
API KEY:
For getting an API key, Go to the below link
enter your website URL and generate the API key..
Process:
There are number of procedure to integrate a google map in
asp.net website, some of them are using dll to add a google map. But this
methods is very easy method to integrate google map.
Here I used JavaScript methods to integrate on google map.
By using this code we can search the place using Country name or Postcode. i pass the country name form the server side code.
Code:
You have to mention the api key for your website
|
<script src="http://maps.google.com/maps?file=api&v=2&key=API KEY&sensor=false"
type="text/javascript"></script>
|
Here the country name has passed
from the server side in the variable name txtAddress from
textbox
|
<script type="text/javascript">
var
map;
var
geocoder;
function
initialize() {
if
(GBrowserIsCompatible()) {
map = new GMap2(document.getElementById("map"));
map.setCenter(new GLatLng(51.5, -0.1), 10);
map.setUIToDefault();
geocoder = new GClientGeocoder();
showAddress();
}
}
function
showAddress() {
var
txtAddress = document.getElementById("<%=txtAddress.ClientID
%>");
var
address = txtAddress.value;
geocoder.getLatLng(
address,
function(point)
{
if
(!point) {
alert(address + " not found");
}
else
{
map.setCenter(point,
15);
var marker = new
GMarker(point);
map.addOverlay(marker);
marker.openInfoWindow(address);
}
}
);
}
</script>
|
In Body we have to add the JavaScript function in
on bodyload.then we have to declare Div tag for showing google map. Code as
follows.
|
<body onload="initialize()" onunload="GUnload()">
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtAddress" runat="server" />
<input type="button" value="Find" onclick="showAddress();" />
</div>
<div id="map" style="width: 500px; height: 500px"></div>
</form>
</body>
|
Steps:
First enter country name in the
textbox
Then click find button to show the
country in the google map.
Now the map shows the exact point as
mention place in the textbox.
Advantages:
By using this google map use option
zoom in and zoom out.
Change the view of the map.
Move the place in the map.
I hope this one helpful to all…….
Post your valuable comments here...........
0 comments:
Post a Comment